複数モダール画面の同時に開いている際の動作や表示不良問題の解決方法

根本原因

Bootstrapのモーダルコンポーネントでは、modal-backdropのdivが自動的に非同期で作成されるのはデフォルトの動作であるため、追加設定がうまく行かない場合たまたま発生する

解決方法

１．modal-backdropのdivが自動的に作成させないようにdata-bs-backdrop="static"⇒data-bs-backdrop="false"に設定
２．モーダルウィンドウが開くときにmodal-backdropクラスを持つdiv要素を作成し、それをモーダルウィンドウの直後に挿入しています。そして、モーダルウィンドウが閉じるときに、そのモーダルウィンドウの直後のmodal-backdropを削除しています。

サンプルコード

クリックして開く

sample.js

const _Com_Modal_EventHandler = {
    zIndex: 1040,
    eventHandler: {
        modalEvents: function () {
            $(document).on('show.bs.modal', '.modal', function () {
                _Com_Modal_EventHandler.zIndex += 10;
                $(this).css('z-index', _Com_Modal_EventHandler.zIndex);

                // Create a custom modal-backdrop and insert it after the modal
                $('<div class="modal-backdrop fade show"></div>').css('z-index', _Com_Modal_EventHandler.zIndex - 1).insertAfter(this);
            });
            $(document).on('hide.bs.modal', '.modal', function () {
                _Com_Modal_EventHandler.zIndex -= 10;

                // Remove the custom modal-backdrop of this modal
                $(this).next('.modal-backdrop').remove();
            });
        }
    }
};

その他

Bootstrap v5.3.2で検証済
Bootbox.jsを利用する時、「backdrop: false」の設定も必要となる