Getting around IE z-index issues to put a modal *on top of* a YUI Panel_问答_开发者

Getting around IE z-index issues to put a modal *on top of* a YUI Panel

开发者 https://www.devze.com 2023-04-12 01:28 出处：网络

I have an informational pop-up modal in my web application, which is basically just a <div> with its \"display\" CSS attribute set to \"none\".A snippet of JavaScript toggles that display attrib

I have an informational pop-up modal in my web application, which is basically just a <div> with its "display" CSS attribute set to "none". A snippet of JavaScript toggles that display attribute when the modal needs to appear.

In most places where this modal can be activated, it works just fine. However, there is one page on the site where some old YUI code brings up a modal in the form of a "YAHOO.widget.Panel" object. When someone triggers the informational event inside of this YUI modal, I need my informational modal to still appear on top of the YUI one.

This works fine in all browsers other than IE. However, in IE the informational modal is completely hidden because it appears behind the YUI one.

There are a number of questions on StackOverflow related to "z-index" CSS issues in IE, but most of them seem related to layout issues on the initial page load. The problem I'm running up against is the YUI Panel being created on-the-fly after page load.

No matter how high I set the z-index for my informational modal (nor how low I tell YUI to set the z-index for its modal)... IE always gives the YUI panel a higher z-index because it was created later.

Is there any clean workaround for a situation like this... where开发者_开发技巧 you need IE to give a higher z-index to a <div> created at page load time than to one created by JavaScript after the page load?

To location of the panel on the page matters, the YUI panel is probably being appended to to body. When you call the .render() method of the YUI panel, specify the parent div to be the same as your popups parent div,

yuipopup.render('infodivparent');

that will make sure the z-indexes work properly.

i.e change from this,

<body>
<div id="yui_panel" style="z-index: 2;"></div>
<div id="content" style="z-index: 1;">
    <div id="mypopup" style="z-index: 100"></div>
</div>
</body>

to this,

<body>
<div id="content" style="z-index: 1;">
    <div id="mypopup" style="z-index: 100"></div>
    <div id="yui_panel" style="z-index: 2;"></div>
</div>
</body>

I should also note, time is never a factor with how the the DOM handles nodes. When it was added means nothing, only where it was added.