如何阻止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

您可以使用CSS z-index;属性来显示堆叠对话框，了解如何显示它们。