Css 当打开另一个模式时，如何使背景覆盖父模式

我正在开发一个web应用程序，用户可以在其中打开modals来做各种事情，并且将有许多层modals被打开，有时是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; }

---

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

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

引导程序v3.3.7，第1108~1110行。
从

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

到

此修改将使背景显示在父元素上，而不是主体的末端，从而更改z索引堆叠上下文，以允许第二个背景停留在第一个模态的顶部

警告：请注意，更改原始引导代码可能会对应用程序产生副作用，如果要使用此解决方案，请小心操作

此答案可使用副作用信息进行编辑。
副作用

• 如果模态位于

  位置

  -ed元素内，则背景可能无法覆盖整个页面
• 父CSS规则可能会意外地应用于背景，您可能必须使用自己的

  .modal background

  类覆盖这些规则

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