ブログ

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');
  });
});