我在使用 ng2-bootstrap 的模式时遇到了问题。我正在做这里提到的整个 viewContainerRef hack 。我正在一个深度嵌套的组件中制作一个模式(通过路由深入 4 层)。我从上面的链接复制了模式代码。每当我尝试打开它时,它都会像这样打开:bs-modal-backdrop 完全覆盖了屏幕,包括模态,阻止我与之交互。知道为什么会这样吗?
问问题
2009 次
2 回答
2
这是具有 z-index 的特定情况。至少有一个父组件创建了一个 z-index 小于背景 z-index 1040 的堆叠上下文。现在所有 HTML 元素都将堆叠在它的上下文中。
这就是为什么无论模态具有什么 z-index,背景都会与模态重叠的原因。
要解决问题:
在与背景相同的上下文中创建模态框,以便 z-index 起作用。应用程序标头组件之外的某个地方。
提高父组件 z-index 使其高于背景的 1040。
这里有完整的描述
于 2017-02-09T21:09:49.550 回答
0
这对我有用,尽管它不是最佳的:
为模态代码实现onShow()
和这样的事件:onHide()
<div class="modal fade"
bsModal #uploadModal="bs-modal"
[config]="{backdrop:'static'}"
tabindex="-1"
(onShow)="handler('onShow', $event)"
(onHide)="handler('onHide', $event)"
role="dialog"
aria-hidden="true">
然后像这样定义处理程序:
private handler(type: string, event: any) {
if (this.containerId) {
let elem:Element = document.getElementById(this.containerId);
if (!elem)
return;
switch (type) {
case 'onShow':
elem.classList.add('modal-front');
break;
case 'onHide':
elem.classList.remove('modal-front');
break;
}
}
}
通过某种机制传入 containerId,例如openModal()
. 最后,添加全局范围的类 modal-front ,它只设置一个高 z-index。
于 2018-04-10T18:36:02.173 回答