Vorwort: Das Unternehmensprojekt muss einen Pop-up-Frame in vertikaler Zentrum verwenden. Ähnliche vertikale Zentrierpop-up-Schichten im Internet sind ähnlich. Da das Projekt auf JQuery basiert, verwenden Sie $ (Fenster) .Height ()-Layer.Height ())/2 +$ (Dokument) .Scrolltop (), um die vertikale Verschiebung zu erhalten. Ich habe alle Arten von Browsern ohne Probleme getestet. Nachdem das Hintergrundpersonal den Wert für das Projekt verschoben hatte, gab es ein Problem. Als die Seite einen Bildschirm unter Chrome und FF überschritt, wurde das Popup-Box nicht vertikal im aktuellen Bildschirm zentriert, sondern relativ zur gesamten Webseite zentriert.
Nach der Überprüfung von Informationen aller Parteien geben alle Schlussfolgerungen an:
1. Fensterhöhe, $ (Fenster) .Height ()
2. Dokumenthöhe, $ (Dokument) .Height ()
3. Die Höhe des aufgerollten, $ (Fenster) .Scrolltop ()
Finden Sie den Grund : Dann stellte ich fest, dass die Seite des Backend -Personals nicht docType hatte, also in Chrome, $ (Fenster) .Height () = $ (Dokument) .Height (), $ (Dokument) .Height () bedeutet, dass bei der tatsächlichen Inhaltshöhe der Webseite nicht der Bildschirm gefüllt ist. Wenn die Seite einen Bildschirm überschreitet, wird sie als die tatsächliche Höhe des gesamten Webseiteninhalts ausgedrückt. Es gibt keine Einwände dagegen, und es hat keinen Einfluss darauf, ob docType festgelegt werden soll oder nicht. Allerdings: $ (Fenster) .Height () befindet sich in transitional.dtd, unabhängig davon, ob die tatsächliche Höhe des Webseiteninhalts den Vollbildmodus überschreitet oder nicht, gleich der Höhe des gesamten Fensters (der Wert ändert sich, wenn das Fenster vergrößert und reduziert wird). Wenn docType nicht festgelegt ist, $ (Fenster) .Height () = $ (Dokument) .Height (). Das heißt, wenn der Inhalt einen Bildschirm überschreitet, ist $ (Fenster) .Height () die tatsächliche Höhe der Webseite, die nicht so bezeichnet wird, dass sie der Fensterhöhe entspricht.
Lösung:
S Um die Höhe des Fensters zu erhalten, können Sie nur auf docType entsprechende Änderungen vornehmen. Wenn docType nicht festgelegt ist, erfolgt die folgende Verarbeitung.
if ($ (Dokument) .Height ()> = $ (Fenster) .Height ()) {_windowHeight = document.body.clientHeight; } else {// alert ($ (Fenster) .Height ()); _WindowHeight = $ (Dokument) .Height (); };Wenn docType auf transitional.dtd eingestellt ist, windowHeight = $ (Fenster) .Height ()
Die obige kurze Diskussion über die Auswirkungen von docType auf den Wert von $ (Fenster) .Height () ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.