[解決済み] モーダルが開かれたときにBODYがスクロールしないようにする

質問

マウスホイールを使ってモーダル(以下、「モーダル」)を表示させたまま、ボディのスクロールを止めたいのです。 http://twitter.github.com/bootstrap )が開かれています。

モーダルが開かれたときに、以下の javascript の一部を呼び出そうとしましたが、うまくいきませんでした。

$(window).scroll(function() { return false; });

AND

$(window).live('scroll', function() { return false; });

IE6に対応したウェブサイトはありません。

解決するには？

Bootstrapの modal は自動的にクラス modal-open は、モーダルダイアログが表示されたときに body に追加され、ダイアログが非表示になったときに削除されます。したがって、CSSに以下のように追加します。

body.modal-open {
    overflow: hidden;
}

上記のコードはBootstrap CSSのコードベースに属すると主張することもできますが、これはあなたのサイトに追加するための簡単な修正です。

2013年2月8日更新
これは、Twitter Bootstrap v. 2.3.0 で動作しなくなりました。 modal-open クラスを本文に追加します。

回避策としては、モーダルが表示されようとするときにボディにクラスを追加し、モーダルが閉じられたときにクラスを削除することです。

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

2013年3月11日更新 のようです。 modal-open クラスが Bootstrap 3.0 で復活する予定です。

ボディに .modal-open を再導入（そこでスクロールをなくすことができます）。

こちらをご覧ください。 https://github.com/twitter/bootstrap/pull/6342 - を見る モーダル のセクションをご覧ください。