{"id":2156,"date":"2010-03-23T19:09:21","date_gmt":"2010-03-23T14:09:21","guid":{"rendered":"http:\/\/www.chiragmehta.info\/chirag\/?p=2156"},"modified":"2010-03-23T19:18:05","modified_gmt":"2010-03-23T14:18:05","slug":"yui-library-the-transparent-mask-turns-black-in-ie-8","status":"publish","type":"post","link":"https:\/\/www.chiragmehta.info\/chirag\/2010\/03\/23\/yui-library-the-transparent-mask-turns-black-in-ie-8\/","title":{"rendered":"YUI Library – The transparent mask turns black in IE 8"},"content":{"rendered":"

Problem Statement<\/strong>
\nI use the YUI dialog in my project and turn on the “modal”, the initializing code looks like:<\/p>\n

document.mainDialog = new YAHOO.widget.Dialog("mainPanel",
\n { modal: false,
\n width: "89em",
\n height: "30em",
\n fixedcenter: true,
\n visible: false,
\n constraintoviewport: true
\n });<\/code><\/p><\/blockquote>\n

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”. <\/p>\n

Solution<\/strong>
\nThe cause is that IE8 does not support the CSS3 ‘opacity’ selector. But YUI uses this to style the mask as follows:<\/p>\n

.yui-skin-sam .mask {
\nbackground-color:#000000;
\nopacity:0.25;
\n}\n<\/p><\/blockquote>\n

To solve this problem – I have an IE specific stylesheet in which I override the above style as follows:<\/p>\n

.yui-skin-sam .mask{
\nfilter: alpha(opacity=30);
\n}\n<\/p><\/blockquote>\n

Read more about the bug @ YUI Library<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[27],"class_list":["post-2156","post","type-post","status-publish","format-standard","hentry","tag-javascript","post-preview"],"_links":{"self":[{"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/posts\/2156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/comments?post=2156"}],"version-history":[{"count":4,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/posts\/2156\/revisions"}],"predecessor-version":[{"id":2160,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/posts\/2156\/revisions\/2160"}],"wp:attachment":[{"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/media?parent=2156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/categories?post=2156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chiragmehta.info\/chirag\/wp-json\/wp\/v2\/tags?post=2156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}