Wie kann das Scrollen des Körpers verhindert werden, wenn in Bootstrap ein Modal verwendet wird?

Verhindern des Scrollens des Körpers während der modalen Anzeige

Bei Verwendung des Modal aus dem Bootstrap-Framework von Twitter kann es zu einem Problem kommen, bei dem das Scrollen des Körpers fortgesetzt wird, wenn die Der modale Dialog ist geöffnet. Dies kann für Benutzer frustrierend sein.

Lösung

Bootstrap fügt automatisch eine Klasse „modal-open“ zum Körper hinzu, wenn ein Modal angezeigt wird. Sie können diese Funktion nutzen, indem Sie Ihrem Stylesheet eine CSS-Regel hinzufügen:

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

Dadurch wird das Scrollen des Textkörpers verhindert, wenn das Modal geöffnet ist.

Überlegungen zur Bootstrap-Version

Beachten Sie, dass diese Lösung je nach Bootstrap-Version Einschränkungen aufweist.

• Bootstrap 2.3.0 und höher: Twitter Bootstrap hat das „modal-open "-Klasse aus dem Körper in dieser Version.

  • Problemumgehung: Sie können die Klasse manuell hinzufügen, wenn das Modal geöffnet wird, und sie entfernen, wenn es geschlossen wird. Dies kann mit jQuery wie folgt erreicht werden:

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

  Nach dem Login kopieren
• Bootstrap 3.0: Die Klasse „modal-open“ wird voraussichtlich in Version 3.0 explizit für zurückkehren Zweck, Scrollen zu verhindern.

IE-Kompatibilität

Beachten Sie, dass die Lösung, wie Sie erwähnt haben, mit IE7 kompatibel ist.

Das obige ist der detaillierte Inhalt vonWie kann das Scrollen des Körpers verhindert werden, wenn in Bootstrap ein Modal verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!