如何确保 Bootstrap 中多个模态的模态堆叠正确？

多个模态叠加

在具有多个模态的界面中，确保打开的模态正确堆叠以及每个新模态的出现至关重要高于之前的。然而，开发人员面临的一个常见问题是后续模态可能会显示在现有模态后面，从而产生不良的叠加。

为了解决此问题，解决方案涉及修改模态背景的 z-index 属性和其元素已呈现。

背景 z-index 修复

为了确保模态背景的正确堆叠顺序，实施了量身定制的解决方案。具体来说，使用了 setTimeout 函数，因为在 show.bs.modal 事件触发期间不存在模态背景。

<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>

这种方法具有几个关键优势：

• 它对页面上的每个模态框（包括动态创建的模态框）都有效运行。
• 背景立即覆盖其下方的模态框，从而实现无缝堆叠。

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 中有效运行。

以上是如何确保 Bootstrap 中多个模态的模态堆叠正确？的详细内容。更多信息请关注PHP中文网其他相关文章！