解决IE z-index问题，在ui面板上放置模态

我在我的web应用程序中有一个信息弹出式模态，这基本上只是一个<div>，其" display " CSS属性设置为" none "。下面是一段JavaScript代码，用于在需要显示模态时切换显示属性。

在大多数可以激活这个模态的地方，它工作得很好。但是，站点上有一个页面，其中一些旧的YUI代码以"YAHOO.widget.Panel"对象的形式显示了一个模态。当有人触发这个YUI模态内部的信息事件时，我需要我的信息模态仍然出现在YUI的之上。

这在除IE以外的所有浏览器中都可以正常工作。然而，在IE中，信息模态是完全隐藏的，因为它出现在YUI的后面。

在StackOverflow上有许多与IE中的"z-index"CSS问题相关的问题，但大多数问题似乎与初始页面加载时的布局问题有关。我遇到的问题是在页面加载后动态创建YUI面板。

无论我为我的信息模态设置多高的z-index(也不是我告诉YUI为它的模态设置多低的z-index)…IE总是给YUI面板一个更高的z-index，因为它是后来创建的。

对于这种情况有什么干净的解决办法吗?在哪里你需要IE给一个更高的z-index创建的<div>在页面加载时间比创建一个JavaScript 后页面加载?

如果面板在页面上的位置很重要，则YUI面板可能被附加到正文中。当您调用YUI面板的.render()方法时，指定父div与您的弹出窗口父div相同，

yuipopup.render('infodivparent');

将确保z索引正常工作。

。E从这个改变，

<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>

<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>

我还应该注意，时间从来不是DOM如何处理节点的一个因素。

相关内容

最新更新

热门标签：