Question

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

非常感谢任何想法和建议！

Answer 1

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

#popup1 {
   z-index: 9997;
}

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

提供#popup1和#popup2具有相同的父级。

Answer 2

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

Answer 3

你可以通过使用两个类和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-indexs。但这取决于项目的性质和范围。

如何在其他模态弹出窗口上方显示模态弹出窗口

3 个答案: