javascript - 如何阻止 jQuery 对话框重叠？

Question

我发现当一个页面上打开多个 jQuery 对话框时，它们很容易重叠。

我将如何通过内置的 jQuery UI 功能或自定义代码来阻止这种情况？

Answer 1

你需要改变CSS z-index值。例如，您一次调用了三个模式窗口，每个窗口都有一个共同class的和唯一的id. 这样说：

<div class="jqui-modal" id="firstModal">
...
</div>

<div class="jqui-modal" id="secondModal">
...
</div>

现在你可以选择哪个是第一个。说，我想要#firstModal在 之上#secondModal，你可以使用这段CSS代码：

#firstModal {z-index: 1599;}
#secondModal {z-index: 1500;}

如果您希望所有模态窗口出现在相同的坐标上，试试这个：

.jqui-modal {z-index: 1600;} /* One single Z-Index for all */

Answer 2

您可以使用 CSSz-index;属性将堆叠的对话框显示为如何显示它们。