bootstrapでmodalがスクロールできなくなる場合の対処法について

bootstrapで、モーダルが画面の外まで表示されているときに、スクロールできなくなる場合がありました。

1. モーダルAを表示(show)
2. モーダルBを表示(show)
3. モーダルBを非表示(hide)
4. モーダルAがスクロールできない！

これは、モーダルBを非表示した際に、bodyについているクラスmodal-openが削除されてしまうためでした。modal-openは、モーダルを表示した際に追加されるクラスです。モーダルを非表示した場合に消えるのは当然なのですが、まだある場合は残しておいて欲しいものです…。

対処法

考えた対処法は、モーダルが消えたタイミングまだ表示中のモーダルがあれば、bodyにmodal-openクラスを追加するというものです。

coffeescript

$ ->
  $(document).on 'hidden.bs.modal', '.modal', ->
    $('body').addClass('modal-open') if $('.modal').is(':visible')

これで、スクロール可能になりました。