ブートストラップでモーダルを使用するときに本文のスクロールを防ぐにはどうすればよいですか?

モーダル表示中の本文スクロールの防止

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 サイトの他の関連記事を参照してください。