无法获得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就可以了。 app app header component之外的某个地方。

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

完全描述了here

Answer 2

这对我有用，虽然它不是最佳的：

为模态代码实施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;
      }

    }
  }

通过openModal()等机制传递containerId。 最后，添加仅设置高z-index的全局范围类modal-front。