☰

モーダルが開かれたときにBODYがスクロールしないようにする 質問する

tag-icon • tag-icon javascript jquery css scroll
モーダルが開かれたときにBODYがスクロールしないようにする 質問する

モーダル（http://twitter.github.com/bootstrap）がオープンしました。

モーダルが開かれたときに以下のJavaScriptを呼び出そうとしましたが、成功しませんでした

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

そして

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

当社の Web サイトは IE6 のサポートを終了しましたが、IE7 以降は互換性がある必要があることにご注意ください。

ベストアンサー1

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

body.modal-open {
    overflow: hidden;
}

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

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

回避策としては、モーダルが表示される直前に body にクラスを追加し、モーダルが閉じられたらクラスを削除することです。

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

2013 年 3 月 11 日更新modal-openこのクラスは、スクロールを防止する目的で Bootstrap 3.0 で復活するようです。

body に .modal-open を再導入します (そこでスクロールを削除できます)

これを参照してください:https://github.com/twitter/bootstrap/pull/6342-モーダルセクションを確認します。

おすすめ記事