 PopUp-Window zentrieren
Abhängig von Breite und Höhe des PopUp-Windows und den Abmessungen des Bildschrims / dem Browserfenster, soll das PopUp-Window horizontal und vertikal mittig angezeigt werden.
|
|
Anzeigeposition des PopUp-Windows errechnen
UPDATE 26.04.2010, Funktion zur Ermittlung der Größe des Anzeigebereichs
PopUp-Window zentriert anzeigen
Ein PopUp-Window können Sie in der Bildschimmitte horizontal und vertikal zentriert ausrichten. Statt der festen Einträge für die x- y-Position werden die Werte errechnet. Das erledigt JavaScript innerhalb der Funktion für das PopUp-Window für Sie.
|
Es wird die Position für die obere linke Ecke des PopUp-Windows errechnet!
|
|
Die Berechnung ist natürlich erst mal abhängig von Breite und Höhe des Windows, dessen Position für die linke obere Ecke errechnet werden soll. Aus der vefügbaren Fensterhöhe und -breite errechnet JavaScript, wo diese Ecke des Fensters positioniert werden muss.
Veranschaulichung der Berechnung des linken Abstands für die zur Verfügung stehende Fenster- / Bildschrimbreite:
Berechnung der Position
Vor dem Update wurden für Abfrage der Bildschirmdimensionen die internen JavaScript-Funktionen screen.width und screen.height genutzt.
Nach meinem Update nutze ich die internen JavaScript-Funktionen screen.availWidth und screen.availHeight, welche den wirklich zur Verfügung stehenden Platz innerhalb des Browserfensters berücksichtigen.
In der Funktion sehen die Angaben für die Größe des PopUp-Windows, die Ermittlung der zur Verfügung stehenden Anzeigefläche und der linken oberen Position so aus:
// PopUp-Größe
PopUpBreite = "550";
PopUpHoehe = "400"
sbreite = screen.availWidth;
shoehe = screen.availHeight;
x = (sbreite - PopUpBreite)/2;
y = (shoehe - PopUpHoehe)/2;
Hier können Sie das JavaScript als Anwendungsbeispiel öffnen:
 BEISPIEL Öffnen
QuellCode ansehen
Querverweise zum Thema Zentrieren
 Inhaltsseite im Browserfenster zentrieren.
Frameset im Browserfenster zentrieren (Menü FRAMES).
Objekt in der Fenstermitte zentrieren
Fehlersuche 100% Tabellenhöhe (Menü Fehlersuche)
Rückblick: Dynamische Berechnung vor dem Update
Die ermittelten Ergebnisse der alten Berechnung weichen unter Umständen browserabhängig von denen der neuen Berechnung dann ab, wenn die Seite z.B. innerhalb eines Framesets angezeigt wird, weil screen.width und screen.height im Gegensatz zu screen.availWidth und screen.availHeight in diesem Fall andere Werte zurückgeben.
Verwendet wurden screen.width und screen.height für die Abfrage der Bildschirmdimensionen.
Im JavaScript wird die Bildschirmweite ermittelt, die Fensterbreite subtrahiert und dieser Wert durch 2 geteilt. Der ermittelte Wert wird der Variablen winlinks zugewiesen !
Im JavaScript wird die Bildschirmhöhe ermittelt, die Fensterhöhe subtrahiert und dieser Wert durch 2 geteilt. Der ermittelte Wert wird der Variablen winoben zugewiesen !
Die Variablen w und h enhalten Angaben für die Fensterbreite und -höhe.
w = 500
h = 400
Berechnung der Breite: Variable: winlinks
var winlinks = (screen.width - w) / 2;
var winlinks =
Ergebnis: Abstand von links ist
Genauso verfährt man mit der Höhe. Variable: winoben
var winoben = (screen.height - h) / 2;
var winoben =
Ergebnis: Abstand von oben ist
Rückblick: Alternative Berechnung vor dem Update
Mit browserabhängigen Größenfeststellungen gab es für die älteren Versionen auch folgende Möglichkeit:
if(ns6||ns4) {
sbreite = innerWidth;
shoehe = innerHeight;
}
else if(ie4) {
sbreite = document.body.clientWidth;
shoehe = document.body.clientHeight;
}
|
Home • PopUp-Windows • Window zentrieren
Demo
