bootstrapでmodalを2重に表示するとbackdropが表示されたままになる

こんにちは。beaglesoftの真鍋です。

TwitterBootstrapでmodal多重表示するときにbackdropにstaticを指定しているとbackdropが全面に表示されてしまうことがあります。これは最初に表示したモーダルダイアログ上でボタンなどをクリックして更にモーダルダイアログを表示するときに発生することがあるようです。

対応方法としては、以下のとおり対応することで事象を回避できました。

$("#child").modal({backdrop: 'static', keyboard: false});
$("#child").on('hidden.bs.modal', function (e) {
    console.log('hidden.bs.modal => ' + e);
    $('.modal-backdrop').remove();
});

#childは最初に表示されるモーダルダイアログで呼ばれるモーダルダイアログです。対応している方法では、#childが閉じられるときに.modal-backdropクラスを削除するようにしています。

たったこれだけの事なのですが、調べるのに結構な時間がかかりました…。

javascript - Bootstrap Modal Backdrop Remaining - Stack Overflow

Enjoy!