如何在另一个模态弹窗之上显示一个模态弹窗

Question

我有一个模态弹出层。当我在模态弹出层中点击一个按钮时，会出现另一个模态弹出层。但是第二个模态弹出层的一部分被隐藏在第一个模态弹出层后面。如何使其显示在第一个模态弹出层之上。

欢迎提出任何想法和建议！

- SaiBand

---

请贴上一些代码。我们不知道你在做什么。其次，从可用性的角度来看，一个模态弹出窗口覆盖另一个模态弹出窗口通常是一个不好的想法。 - Jagmag

Answer 1

尝试设置弹出窗口包装器的 z-index 大于其他元素。

#popup1 {
   z-index: 9997;
}

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

只要#popup1和#popup2具有相同的父元素，即可实现此操作。

- Sushanth --

Answer 2

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

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

- Nw167

Answer 3

将弹出窗口的z-index设置为最高，高于DOM中的任何其他元素。可以将其视为应该在顶部的层。

- srijan