5

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

4

2 回答 2

2

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

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

要解决问题:

  1. 在与背景相同的上下文中创建模态框,以便 z-index 起作用。应用程序标头组件之外的某个地方。

  2. 提高父组件 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 回答