【Twitter Bootstrap2.3.1】モーダルを表示された状態でスクロールした時にページ全体がスクロールするのを止める

問題

モーダルが表示されている時はページ全体をスクロールさせたくない。

解決方法

  • 2.3未満の場合はcssだけで完了。
body.modal-open{
    overflow: hidden;
}
  • 2.3以降はモーダルが表示された時にbodyに.modal-openがつかないのでjQueryで処理する。
$(".modal").on("shown", function(){
    $("body").addClass("modal-open");
});

$(".modal").on("hidden", function(){
    $("body").removeClass("modal-open");
});

参考

Prevent BODY from scrolling when a modal is opened