【jQuery】Bootstrapでモーダルを複数重ねて表示する

画面を動かしているときに、レイアウトが崩れるモーダルダイアログがあった。

そのモーダルダイアログは親モーダルからさらに呼び出されるモーダルである。

色々検討したところ、

Bootstrapのモーダルを複数枚重ねて表示するときは、

親オーバレイ＞親モーダル＞子オーバレイ＞子モーダル

となるようにz-indexを動的に変更しなければならないことが判明した。

    // 親のモーダルダイアログからの呼び出しに限り、z-index値を調整
    var x = $('#parentModalDialog').length;
    if (x == 1) {
    // オーバレイ->モーダル->オーバーレイ->モーダル->オーバーレイと交互に重なるようにする
    var zIndex = 3000; //　親モーダルオーバーレイのzIndex
    setTimeout(function () {
        $('.modal-backdrop')
            .not('.modal-stack')
            .css('z-index', zIndex + 1)
            .addClass('modal-stack');
    }, 0);
        $('#childModal').css('z-index', zIndex + 2);
    }
    

以下のサイトが参考になったのでメモ。

slash-mochi.net