3

我有一个模态弹出窗口。当我单击 Modal Pop Up 中的按钮时，会出现另一个 Modal Pop Up。但是第二个模态弹出窗口的一些隐藏在第一个模态弹出窗口的后面。如何使其显示在第一个模式弹出窗口上方。

任何想法和建议表示赞赏！

4

3 回答 3

8

尝试将您想要的弹出包装的z-index设置为大于另一个..

#popup1 {
   z-index: 9997;
}

#popup2 {
   z-index: 9998; // This will come above popup1
}

这是提供的，#popup1并且#popup2具有相同的父级。

于 2012-10-08T17:15:51.417 回答
2

您可以通过使用两个类和 jQuery 来动态解决这个问题：

.PopUp {
    z-index:999;
    }

.PopUp-focus {
    z-index:1000;
    }

默认情况下，所有弹出窗口都将具有“PopUp”类。

然后创建以下 jQuery 函数来处理打开弹出窗口的事件。（这可能与上下文无关，因为您没有提供代码，但为了举例......）

function OpenPopup(popupID) {

    $(".PopUp-focus").removeClass('PopUp-focus').addClass('PopUp');

    $("#"+popupID+"").removeClass('PopUp').addClass('PopUp-focus');

    $("#"+popupID+"").fadeIn(500); // Your code to make the popup appear. (Random example).

}

--

<div onClick="OpenPopup('ID of popup');">Open Popup</div>

这将非常简单地解决同时打开两个弹出窗口的问题，方法是为最近打开的弹出窗口提供比任何其他窗口更高的 z-index。

缺点是如果出现打开超过 2 个弹出窗口的情况，后台弹出窗口将面临冲突的风险，并且需要更精细的脚本来减少/增加 z-index。但这取决于您项目的性质和范围。

于 2012-10-08T17:48:24.063 回答
2

设置弹出窗口的 z-index，它应该在顶部，高于 DOM 上的任何其他元素。把它想象成应该在顶部的层。

于 2012-10-08T17:16:39.823 回答