BlockUI jquery-ui theme support in IE

Question

This may be something I just have to live with, but does the blockUI plugin jQuery-ui theme support supposed to work with IE?

For some reason, the overlay always show up solid, with no opacity. The normal blockUI overlay works fine, but when I enable theming, the overlay shows up solid. This is really ugly in IE (which I my users are required to use).

I am using IE 7. I imagine the plugin works fine with IE 9, not sure about IE 8.

Has anyone else experienced this? It even works this way on the blockUI demo page (at least for me.) Anyone know of a work-around?

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

Thanks in advance.

Answer 1

thats a bug in blockUI, the 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 inline "filter" property overwrites the css property in .ui-widget-overlay but you can fix this by yourself by editing your jquery-ui.x.x.x.xxxx.css file.

just search for

/* 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 !important behind the 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 wrong inline style.

Answer 2

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

This is a browser limitation and not something you can get around without using external polyfills. Even the regular jQueryUI themes are square in those browsers normally.