Heim > Web-Frontend > js-Tutorial > Wie zentriere ich ein Popup-Fenster im Browser?

Wie zentriere ich ein Popup-Fenster im Browser?

Linda Hamilton
Freigeben: 2024-10-31 06:20:02
Original
511 Leute haben es durchsucht

How to Center a Popup Window in the Browser?

So positionieren Sie ein Popup-Fenster genau in der Mitte des Bildschirms

Zentrieren eines Popup-Fensters, das mit der window.open-Funktion von JavaScript erstellt wurde Der Bildschirm ist für ein optimales Benutzererlebnis unerlässlich. Die genauen Koordinaten hängen von der Bildschirmauflösung ab, daher ist eine dynamische Lösung erforderlich.

Lösung: Nutzen Sie eine Einzel-/Doppelmonitorfunktion

Eine robuste Lösung, die beide Einzelmonitore unterstützt und Dual-Monitor-Setups ist unten angegeben:

<code class="javascript">const popupCenter = ({ url, title, w, h }) => {
    // Determine the positions based on screen resolution
    const dualScreenLeft = window.screenLeft || window.screenX;
    const dualScreenTop = window.screenTop || window.screenY;

    const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
    const height = window.innerHeight || document.documentElement.clientHeight || screen.height;

    // Adjust for system zoom
    const systemZoom = width / window.screen.availWidth;

    // Calculate the centered coordinates
    const left = (width - w) / 2 / systemZoom + dualScreenLeft;
    const top = (height - h) / 2 / systemZoom + dualScreenTop;

    // Open the popup window with the calculated dimensions and positioning
    const newWindow = window.open(url, title,
        `
        scrollbars=yes,
        width=${w / systemZoom},
        height=${h / systemZoom},
        top=${top},
        left=${left}
        `
    );

    if (window.focus) newWindow.focus();
};</code>
Nach dem Login kopieren

Verwendungsbeispiel:

<code class="javascript">popupCenter({ url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500 }); </code>
Nach dem Login kopieren

Credits und Quelle:

Diese Lösung, ursprünglich von http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html, handhabt effektiv die Zentrierung von Popup-Fenstern für eine Vielzahl von Bildschirmkonfigurationen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Popup-Fenster im Browser?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage