如何确保多个模态在 Bootstrap 中正确叠加可见背景？

多个模态叠加

在这种情况下，您希望叠加层显示在第一个模态上方，而不是其后面。

解决方案

受 @YermoLamers 和 @Ketwaroo 贡献的启发，一个全面的解决方案包括：

背景 Z 索引修复

要解决第一个模态后面出现的背景问题，请实现以下 JavaScript：

<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 索引自定义

如果您愿意要自定义 z-index 计算，您可以采用以下方法：

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

滚动条修复

解决关闭第二个模态框阻止在模态框中滚动的情况超过浏览器高度，请包含以下 JavaScript：

<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中文网其他相关文章！