angular - ng2-bootstrap modal を bs-modal-backdrop の上に表示できません

Question

ng2-bootstrap のモーダルの使用に問題があります。ここで言及されているviewContainerRefハック全体を行っています。深くネストされたコンポーネント (ルーティングによって 4 レベルの深さ) でモーダルを作成しています。上記のリンクからモーダルコードをコピーしました。開こうとするたびに、次のように開きます: bs-modal-backdrop がモーダルを含めて画面を完全に覆っているため、操作できません。なぜこれが起こっているのですか？

Answer 1

これは最適ではありませんが、私にとってはうまくいきます：

モーダル コードの実装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()ます。最後に、高い z-index を設定するグローバル スコープのクラス modal-front を追加します。