angular - 无法让 ng2-bootstrap 模态显示在 bs-modal-backdrop 之上

Question

我在使用 ng2-bootstrap 的模式时遇到了问题。我正在做提到的整个 viewContainerRef hack here .我在一个深度嵌套的组件中制作一个模态(通过路由深 4 层)。我从上面的链接复制了模态代码。每当我尝试打开它时，它都是这样打开的: bs-modal-backdrop 完全覆盖了屏幕，包括模式，阻止我与之交互。知道为什么会这样吗？

Answer 1

这是 z-index 的特定情况。至少有一个父组件创建了一个 z-index 小于背景 z-index 1040 的堆叠上下文。现在所有 HTML 元素都将堆叠在它的上下文中。

这就是无论模态具有什么 z-index，背景都会与模态重叠的原因。

解决问题:

1. 在与背景相同的上下文中创建模式，以便 z-index 起作用。应用 header 组件之外的某处。

2. 提高父组件的 z-index，使其高于背景的 1040。

完整描述here