Wie verhindert man das Scrollen des Textkörpers, wenn ein modales Fenster geöffnet ist?

Body Scrolling verhindern, wenn Modal geöffnet ist

Problemstellung:

Bei Verwendung des Modal von http://twitter.github.com/bootstrap , scrollt der Körper weiter, wenn das Mausrad verwendet wird. Wie können wir das verhindern?

Lösungsversuche:

Versuche, JavaScript zu verwenden, um das Scrollen mit $(window).scroll und $(window).live('scroll') zu verhindern, waren erfolglos .

Bootstrap-Unterstützung:

Bootstrap hat die Modal-Open-Klasse in den Körper eingeführt, wenn ein modaler Dialog angezeigt wird. Diese Klasse kann verwendet werden, um das Scrollen über CSS zu verhindern.

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

Aktuelle Situation (aktualisiert am 8. Februar 2013):

Diese Lösung funktioniert nicht mehr mit Twitter Bootstrap v. 2.3.0, as Die Modal-Open-Klasse wird nicht zum Körper hinzugefügt.

Aktuelle Problemumgehung:

Fügen Sie die Modal-Open-Klasse zum Körper hinzu und entfernen Sie sie, wenn das Modal mithilfe von angezeigt bzw. ausgeblendet wird folgendes JavaScript:

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

Zukünftiges Update (11. März 2013):

Die Modal-Open-Klasse wird voraussichtlich in Bootstrap 3.0 zurückkehren, mit dem ausdrücklichen Zweck, Scrollen zu verhindern:

<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>

Das obige ist der detaillierte Inhalt vonWie verhindert man das Scrollen des Textkörpers, wenn ein modales Fenster geöffnet ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!