Question

我正在开发一个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; }

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

Answer 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类覆盖这些规则。

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

1 个答案: