ブートストラップでモーダルを使用するときに本文のスクロールを防ぐにはどうすればよいですか?
Oct 19, 2024 pm 06:07 PMモーダル表示中の本文スクロールの防止
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.
- 回避策: モーダルが開くときにクラスを手動で追加し、モーダルが閉じるときに削除できます。これは、次のように jQuery を使用して実現できます。
<code class="js">$("#myModal").on("show", function () { $("body").addClass("modal-open"); }).on("hidden", function () { $("body").removeClass("modal-open") });</code>
ログイン後にコピー - Bootstrap 3.0: 「modal-open」クラスは、バージョン 3.0 で明示的に返されることが期待されています。スクロールを防ぐ目的。
IE の互換性
前述したように、このソリューションは IE7 と互換性があることに注意してください。
以上がブートストラップでモーダルを使用するときに本文のスクロールを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7282
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1342
46


Laravel チュートリアル
1258
25


PHP チュートリアル
1205
29

