我正在开发一个 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; }
但我需要它是通用的（而不是像上面那样讨厌的黑客），最好的方法是什么？
我通过更改引导程序代码解决了它。
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 元素内，背景可能不会覆盖整个页面.modal-backdrop类覆盖这些规则。本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句