如何阻止 jQuery 对话框重叠？ [关闭]

Posted 2023-05-08

【中文标题】如何阻止 jQuery 对话框重叠？ [关闭]

【英文标题】：How to stop jQuery dialogs from overlapping? [closed]

【发布时间】：2012-10-10 17:16:42

【问题描述】：

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

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

【问题讨论】：

反对票是怎么回事

你需要详细一点！ :)在您的问题中添加一些代码，看看是否删除了反对票！

你可能想看看masonry或者搜索jquery碰撞检测

【参考方案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 */

【讨论】：

但是它们会重叠。我猜 OP 希望他们能很好地相互配合，并让 NEXT 相互对齐

@mplungjan 嗯，是的，我把这个问题搞砸了。现已更新。

如果您希望他们始终彼此相邻，当他们共享同一个空间时将彼此推到一边？

【参考方案2】：

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