如何修复 Bootstrap 中的重叠模态：使用 setTimeout 和 Z-Index 管理的简单解决方案。-js教程-PHP中文网

如何修复 Bootstrap 中的重叠模态：使用 setTimeout 和 Z-Index 管理的简单解决方案。

Barbara Streisand

发布： 2024-10-26 02:14:02

原创

465 人浏览过

How to Fix Overlapping Modals in Bootstrap: A Simple Solution with setTimeout and Z-Index Management.

多个模态轻松叠加

遇到多个模态相互叠加可能会令人沮丧，尤其是当您需要新模态出现在顶部时位于现有的后面。为了解决这个问题，我们将深入研究一个受两位杰出贡献者启发的解决方案：@YermoLamers 和 @Ketwaroo。

Backdrop Z-Index Fix

此解决方案依赖于在 setTimeout 函数上，因为触发 show.bs.modal 事件时尚未创建 .modal-backdrop 元素。

<code class="javascript">$(document).on('show.bs.modal', '.modal', function() {
  const zIndex = 1040 + 10 * $('.modal:visible').length;
  $(this).css('z-index', zIndex);
  setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});</code>

登录后复制

这种方法有几个优点：

它适用于页面上的所有 .modal 元素，包括动态创建的元素。
背景立即覆盖之前的模态。

Z-Index 计算

如果您不想硬编码 z-index，可以动态计算页面上的最高 z-index：

<code class="javascript">const zIndex = 10 +
  Math.max(...Array.from(document.querySelectorAll('*')).map((el) => +el.style.zIndex));</code>

登录后复制

滚动条修复

如果模态框超出浏览器高度，则关闭内部模态框时可能会遇到滚动问题。要解决此问题，请添加以下内容：

<code class="javascript">$(document).on('hidden.bs.modal', '.modal',
  () => $('.modal:visible').length && $(document.body).addClass('modal-open'));</code>

登录后复制

兼容性

此解决方案已使用 Bootstrap 版本 3.1.0 - 3.3.5 进行了测试。

JSFiddle 示例

[JSFiddle 示例](https://jsfiddle.net/)

以上是如何修复 Bootstrap 中的重叠模态：使用 setTimeout 和 Z-Index 管理的简单解决方案。的详细内容。更多信息请关注PHP中文网其他相关文章！