Problem Statement
I use the YUI dialog in my project and turn on the “modal”, the initializing code looks like:

document.mainDialog = new YAHOO.widget.Dialog("mainPanel",
{ modal: false,
width: "89em",
height: "30em",
fixedcenter: true,
visible: false,
constraintoviewport: true
});

The modal works fine in IE 7.0 and Fireforx 3.0, it generates a transparent mask to prevent activating any elements in the document before closing the modal. But in IE 8.0, the transparent mask turns to “black”, rather than “transparent”.

Solution
The cause is that IE8 does not support the CSS3 ‘opacity’ selector. But YUI uses this to style the mask as follows:

.yui-skin-sam .mask {
background-color:#000000;
opacity:0.25;
}

To solve this problem – I have an IE specific stylesheet in which I override the above style as follows:

.yui-skin-sam .mask{
filter: alpha(opacity=30);
}

Read more about the bug @ YUI Library