jquery Ui Dialog box opacity / alpha filter broken in IE7/8 when using jquery.effects.fade.js
- by Ideasman101
Greetings!
Goal: transparant ui dialog box in IE7/8 with fade in/out effect upon open/close.
Opacity was set in css and works just fine (safari, chrome, ff ie7/8) using native effects blind / explode etc. But when using efects.fade.js on the dialog box the opacity does not work on ie7/8
We want fade in/out because that looks awesome.
Anyway here is my code.
Any help much appreciated. Maybe something to do with filter or cleartype.
My css
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; opacity:0.85;filter:alpha(opacity=85);}
My jQuery
// Dialog1
$('#dialog1').dialog({
position: [250,120],
autoOpen: false,
closeOnEscape: true,
modal: false,
show: { effect: "fade", options: {}, speed: 1500 },
hide: { effect: "fade", options: {}, speed: 1500 },
resizable: false,
width: 350,
height: 200 });
// Dialog Link 1
$('#dialog_link1').click(function(){
$([1,2,3]).each(function(){
var num = this;
$('#dialog'+num).dialog('close');
});
$('#dialog1').dialog('open');
$('body').css("background-image", "url(images/image1.jpg)");
$('body').css("background-repeat", "no-repeat");
$('body').css("background-position", "bottom center");
$('body').css("background-attachment", "fixed");
$('body').css("bottom", "0px");
return false;
});
