Geek Answers Handbook

Support for jQuery-ui block support in IE

It may be something I just need to live with, but does the blockUI shell support jQuery-ui to work with IE?

For some reason, the overlay always appears solid, without transparency. Normal overlay overlUU works fine, but when I turn on the theme, the overlay appears solid. This is really ugly in IE (which I should use for my users).

I use IE 7. I think the plugin works fine with IE 9, not sure about IE 8.

Has anyone else experienced this? This even works on the blockUI demo page (at least for me). Does anyone know of a workaround?

http://jquery.malsup.com/block/#demos

Thanks in advance.

+4
source share
2 answers

thats an error in the blockUI generated overlay div looks like this:

<div class="blockUI blockOverlay ui-widget-overlay" style="z-index: 1001; position: fixed; filter: ; zoom: 1;" jQuery1306503573140="70"/>

the empty “filter” built-in property overwrites the css property in .ui-widget-overlay, but you can fix this yourself by editing the jquery-ui.xxxxxxx.css file.

just do a search

 /* Overlays */ .ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30; filter:Alpha(Opacity=30); }

and add a value to an important filter property like this

 /* Overlays */ .ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30; filter:Alpha(Opacity=30) !important; }

this will force the browser to use the CSS style instead of the incorrect inline style.

+8
source

BlockUI uses CSS Border-Radius, which is not supported in IE 6/7/8

This is a browser limitation, not something you can get around without using external policies. Even regular jQueryUI themes are square in these browsers in normal mode.

+1
source

More articles:


All Articles