打开另一个模态时如何使背景覆盖父模态答案

【问题标题】：How to make backdrop cover parent modal when another modal is opened打开另一个模态时如何使背景覆盖父模态
【发布时间】：2017-03-11 02:54:52
【问题描述】：

我正在开发一个 Web 应用程序，用户可以在其中打开模态框来做各种事情，并且会打开很多层模态框，有时是 4 层或更多。

以下 css 演示了我正在尝试做的事情：

.modal-backdrop { z-index: 1040; }
.modal { z-index: 1050; }

.modal-backdrop + .modal-backdrop { z-index: 1060; }
.modal .modal  { z-index: 1070; }

.modal-backdrop + .modal-backdrop + .modal-backdrop { z-index: 1080; }
.modal .modal .modal { z-index: 1090; }

但我需要它是通用的（而不是像上面那样讨厌的 hack），最好的方法是什么？

【问题讨论】：

标签： css twitter-bootstrap bootstrap-modal

【解决方案1】：

我通过更改引导代码解决了这个问题。

Bootstrap v3.3.7，第 1108~1110 行。
改变自

this.$backdrop = $(document.createElement('div'))
  .addClass('modal-backdrop ' + animate)
  .appendTo(this.$body)

到

this.$backdrop = $(document.createElement('div'))
  .addClass('modal-backdrop ' + animate)
  .appendTo(this.$element.parent())

此修改将使背景出现在父元素上，而不是主体的末尾，从而更改 z-index 堆叠上下文以允许第二个背景保持在第一个模态的顶部。

警告：请注意，更改原始引导代码可能会对您的应用程序造成副作用，如果您想使用此解决方案，请谨慎操作。

此答案对带有副作用信息的编辑开放。
副作用

如果您的模态框位于 position-ed 元素内，则背景可能不会覆盖整个页面
父 CSS 规则可能会意外应用于背景，您可能必须使用自己的 .modal-backdrop 类覆盖这些规则。

【讨论】：