Wie Sie verhindern Hintergrund Scrollen beim Anzeigen von modalen Dialog in jQuery

Web-Entwickler kann die modale Popup-Fenster-Technik für die Anzeige der Inhalte auf seiner Website-Besucher nutzen. Diese modale Fenster sind eine häufig verwendete Web 2.0-Design-Strategie. Jedoch wenn ein modales Fenster über mehrere Seiten Hintergrund Inhalt angezeigt wird, kann der Benutzer das modale Fenster außerhalb des Bildschirms Blättern Sie nach unten scrollen. Da viele modale Fenster Hintergrund teilweise stummgeschaltet wird verursachen, könnte der Benutzer Seiten teilweise verblasst Text potenziell durchblättern. Mithilfe von jQuery .css() Methode kann ein Webentwickler Ausblenden dieser Überlauf und halten das modale Fenster auf dem Bildschirm zentriert.

Anweisungen

1 Einbinden der jQuery und modalen Fenster Skripts. Dieses Beispiel verwendet die modale Bestätigungsfenster aus der jQuery UI-Plug-in. Das Beispiel modale Fenster hat mit jQuery UI Cupertino Thema gestaltet worden. Der gesamte Code ist aus der Google-Entwickler-API verfügbar:

< link Href = "als http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" Rel = "Stylesheet" Type = "Text/Css" / >

< Skript) .dialog({

Größe: falsch,

Höhe: 140,

modal: wahr,

Schaltflächen: {}

"Alle Elemente löschen": function() {}

$(dies) .dialog ("Schließen");

},

Abbrechen: function() {}

$(dies) .dialog ("Schließen");

}

}

});

});

& Lt; / script > 3

Schreiben Sie den HTML-Code. Das Dialogfeld bestätigen Div entspricht den Demo-Code von der jQuery UI modal Bestätigung Dialogfeld Implementierung verwendet:

< Körper >

< p > viele Hintergrundtext geht hier </p >

< Div Id = "bestätigen-Dialogfeld" Titel = "Papierkorb leeren"? >

<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>

< / Div >

< / body >

4 Bearbeiten Sie den jQuery-Code um den überschreitenden Inhalt auszublenden. Wenn das Dialogfeld ausgelöst wird müssen Sie die jQuery .css()-Methode verwenden, die Overflow-Eigenschaft des Body-Elements ändern zu versteckten. Dies blendet alle überschüssigen Hintergrund Inhalte, wenn das modale Fenster erscheint. Es ist wichtig die .css()-Methode zu verwenden, zum Wiederherstellen des Body-Elements Overflow-Eigenschaft, um einen Bildlauf durchzuführen, sobald das modale Fenster vom Benutzer geschlossen wird. In diesem Beispiel wird den jQuery-Code zum Ausblenden des Überlaufs auf Aktivierung und anschließend wiederherstellen der Bildlaufleiste, wenn der Benutzer auf eine Schaltfläche klickt und das Fenster schließt erweitert:

<script>

$(function() {

$( "#dialog-confirm" ).dialog({

resizable: false,

height:140,

modal: true,

buttons: {

"Delete all items": function() {

$('body').css('overflow','scroll');

$( this ).dialog( "close" );

},

Cancel: function() {

$('body').css('overflow','scroll');

$( this ).dialog( "close" );

}

}

});

$('body').css('overflow','hidden');

});

</script>

Tipps & Warnungen

• Nachdem in den richtigen Tags platziert, erscheint das vollständige Beispiel des Sample-Codes wie folgt:
• <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / EN" "als http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
• < html Xmlns = "als http://www.w3.org/1999/xhtml" >
• < Head >
• < Meta http-Equiv = "Content-Type" Content = "Text/html; Charset = UTF-8 "/ >
• < Title > modales Dialogfeld Beispiel < / title >
• < link Href = "als http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" Rel = "Stylesheet" Type = "Text/Css" / >
• < script Src = "als http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" >< / script >
• < script Src = "als http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" >< / script >
• < Skript >
• {$(function()}
• $("#dialog-bestätigen") .dialog({
• Größe: falsch,
• Höhe: 140,
• modal: wahr,
• Schaltflächen: {}
• "Alle Elemente löschen": function() {}
• $(dies) .dialog ("Schließen");
• },
• Abbrechen: function() {}
• $('body').css('overflow','scroll');
• $(dies) .dialog ("Schließen");
• }
• }
• });
• $('body').css('overflow','hidden');
• });
• < / script >
• < / head >
• < Körper >
• < p > viel Text hier. </p >
• < Div Id = "bestätigen-Dialogfeld" Titel = "Papierkorb leeren"? >
• < p >< span Class = "Ui-Symbol Ui-Symbol-Alarm" Style = "Float: Left; Margin: 0 7px 20px 0; " >< / span > diese Elemente dauerhaft gelöscht und können nicht wiederhergestellt werden. Sind Sie sicher? </p >
• < / Div >
• < / body >
• < / html >
• Einige älteren Versionen von Internet Explorer-Browsern erfordern das Height-Attribut des Body-Elements vor der Gründung einer Überlauf-Einstellung festgelegt werden. Wenn Rückwärts Kompatibilität mit älteren Browsern wichtig ist, sollten Sie umschließen den gesamten Körper-Inhalt innerhalb eines Div und verwenden Sie die Methode .css() die Überlauf-Eigenschaften dieses div-Tags ändern, wenn die Modal angezeigt wird.