如何确保Bootstrap中多个模态按正确的顺序叠加？

如何使多个模态框按正确的顺序叠加

在某些场景下，有必要在同一页面上显示多个模态框。然而，确保每个模态出现在前一个模态之上可能具有挑战性。本文探讨了一种以正确顺序覆盖模态的解决方案，特别是当涉及两个以上模态时。

设置

在给定的代码片段中，多个模态 ( “#myModal”和“#myModal2”）被编程为通过按钮事件启动。问题在于“#myModal2”模式如何出现在“#myModal”模式后面，而不是覆盖它。

解决方案

解决方案围绕着制作一个JavaScript 函数，可有效管理模态及其背景的 z 索引。下面详细说明的此函数通过实现以下步骤来实现所需的行为：

1. 背景 Z 索引修复：

   • A setTimeout 函数用于解决 .modal-backdrop 元素创建过程中的延迟问题。
   • 当每个模态变得可见时，其 z 索引逐渐递增，确保它覆盖前一个模态。
   • .modal-backdrop z-index 设置为比模态框的 z-index 小 1，使其能够用作模态框的背景而不遮挡它。

2. 滚动条修复：

   • 当超​​出浏览器高度的模态框关闭时，在其下方的可见模态框内滚动将被禁用。为了解决这个问题，当模式被隐藏时会执行一个函数，通过在页面的 body 元素上维护 modal-open 类来重新启用滚动。

代码片段

<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'));
});

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

结论

实现此解决方案可确保多个模态按正确的顺序叠加，背景始终出现在活动模态后面。该技术已经过测试，适用于 Bootstrap 版本 3.1.0 至 3.3.5。

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