ブログ

Bootstrap3で複数のmodalを表示したときにスクロールできなくなるときの対処方法
2017.06.16

Twitter Bootstrap 3 で、スクロールが必要なほどの高さの複数のモーダルを重ね合わせて表示した場合の話です。

例えば、
　モーダルA
の上に
　モーダルB
を表示していた場合、
モーダルBを閉じると、モーダルAがスクロールできなくなってしまうという現象です。

原因は、Bootstrap 3 の仕様なのか、モーダルを閉じた際に、まだ他に表示中のモーダルがあるか否かに関わらず、「modal-open」クラスを削除してしまうことにあるようです。

次のように、モーダルを閉じたイベントをきっかけに、まだ表示中のモーダルがある場合には、「modal-open」クラスを改めてbodyタグに付与することで問題を解決できました。

具体的には、モーダルを表示する際にベースとなるページに、以下のjavascriptを記述しておきます。

$(document).ready(function(){
  $(document).on('hidden.bs.modal', function () {
    if ($('.modal').is(':visible')) $('body').addClass('modal-open');
  });
});