我有一个模态弹出层。当我在模态弹出层中点击一个按钮时,会出现另一个模态弹出层。但是第二个模态弹出层的一部分被隐藏在第一个模态弹出层后面。如何使其显示在第一个模态弹出层之上。
欢迎提出任何想法和建议!
尝试设置弹出窗口包装器的 z-index 大于其他元素。
#popup1 {
z-index: 9997;
}
#popup2 {
z-index: 9998; // This will come above popup1
}
#popup1
和#popup2
具有相同的父元素,即可实现此操作。您可以通过使用两个类和jQuery动态地解决此问题:
.PopUp {
z-index:999;
}
.PopUp-focus {
z-index:1000;
}
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。但这取决于您项目的性质和范围。
将弹出窗口的z-index设置为最高,高于DOM中的任何其他元素。可以将其视为应该在顶部的层。