Ich habe eine Webseite, die einige Sachen mit AJAX lädt. Ich möchte ein Overlay mit einer Ladeanzeige anzeigen, während der Ladevorgang läuft, so dass der Benutzer nicht mit den meisten Seiten interagieren kann - mit Ausnahme des Menüs oben. Ich verwende jQuery und das jQuery BlockUI-Plugin , um dies zu tun.
Ich rufe $ (element) .block () auf und es funktioniert gut, aber das Overlay erstreckt sich nur bis zum aktuellen Inhalt meiner Seite. Wenn mehr Inhalt geladen und der Seite hinzugefügt wird, bewegt sich das Overlay mit und es sieht etwas hässlich aus. Im Idealfall möchte ich, dass der gesamte sichtbare Bereich der Seite von Anfang an abgedeckt wird. Ein einfacher Hack dafür wäre, einen großen Wert für die Höhe der Überlagerung zu setzen:
%Vor%... aber das schafft eine Bildlaufleiste! Wie vermeide ich das und mache es nur die richtige Höhe, um die sichtbare Seite zu bedecken, aber nicht vergrößern?
In XHTML sind die HTML- und Body-Elemente nicht ganz so magisch wie in HTML. Das body-Element füllt das Ansichtsfenster nicht automatisch, seine Größe ist nur so groß wie der Inhalt.
Damit ein Element das Fenster füllt, müssen Sie zuerst die HTML- und body-Elemente füllen:
%Vor% Dann können Sie height: 100%; für ein Element im Körper verwenden, damit es die gesamte Höhe abdeckt.
Der folgende Code funktionierte für mich:
%Vor%Ich habe den folgenden Beitrag als Referenz verwendet: Machen div 100% Höhe von Browserfenster Die einzige Änderung, die ich tun musste, war, links und rechts hinzuzufügen. Mein Overlay bedeckt nur die Hälfte des Bildschirms.