モーダルウィンドウが開いているときに本文のスクロールを防ぐにはどうすればよいですか?

モーダルが開いているときに本文がスクロールしないようにする

問題点:

http://twitter.github.com/bootstrap のモーダルを使用する場合、マウスホイールを使用すると、本体はスクロールし続けます。これを防ぐにはどうすればよいでしょうか?

試みられた解決策:

$(window).scroll と $(window).live('scroll') を使用して JavaScript を使用してスクロールを防止しようとしましたが、失敗しました。 .

ブートストラップのサポート:

ブートストラップは、モーダル ダイアログが表示されるときに本体に modal-open クラスを導入しました。このクラスは、CSS によるスクロールを防ぐために使用できます。

<code class="css">body.modal-open {
    overflow: hidden;
}</code>

現在の状況 (2013 年 2 月 8 日更新):

このソリューションは、Twitter Bootstrap v. 2.3.0 では動作しなくなりました。 modal-open クラスは本文に追加されません。

現在の回避策:

モーダルが表示されるときと非表示になるときに、それぞれ modal-open クラスを本文に追加および削除します。次の JavaScript:

<code class="javascript">$("#myModal").on("show", function() {
    $("body").addClass("modal-open");
}).on("hidden", function() {
    $("body").removeClass("modal-open");
});</code>

今後の更新 (2013 年 3 月 11 日):

モーダルオープン クラスは、スクロールを防ぐという明示的な目的で Bootstrap 3.0 で返される予定です:

<code class="css">/* Enable Body overflow hidden */
.modal {
    ...
    /* support for transition.* to transition .bs-modal-backdrop and .bs-modal-content */
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    /* modal container size */
    width: 560px;
    margin: 20px auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    /* background color; best with border-radius for dialog box effect */
    /* fallback for IE7-8 */
    background-color: #ffffff;
    /* IE9+ */
    background-clip: padding-box;
    /* fade in effect; (speed/timing via CSS animation) */
    opacity: 1;
 }
/* body overflow hidden */
body.modal-open {
    overflow: hidden;
}</code>

以上がモーダルウィンドウが開いているときに本文のスクロールを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。