モーダル表示中の本文スクロールの防止
Twitter の Bootstrap フレームワークのモーダルを使用する場合、モーダルダイアログが開いています。これはユーザーにとってイライラする可能性があります。
解決策
モーダルが表示されると、Bootstrap はクラス「modal-open」を本体に自動的に追加します。この機能は、スタイルシートに CSS ルールを追加することで利用できます:
<code class="css">body.modal-open { overflow: hidden; }</code>
これにより、モーダルが開いているときに本文がスクロールされなくなります。
ブートストラップ バージョンに関する考慮事項
このソリューションには、Bootstrap のバージョンに応じた制限があることに注意してください。
Bootstrap 2.3.0 以降: Twitter Bootstrap は、「modal-open」を削除しました" class from this version in body.
<code class="js">$("#myModal").on("show", function () { $("body").addClass("modal-open"); }).on("hidden", function () { $("body").removeClass("modal-open") });</code>
IE の互換性
前述したように、このソリューションは IE7 と互換性があることに注意してください。
以上がブートストラップでモーダルを使用するときに本文のスクロールを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。