Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie zentriere ich ein Popup-Fenster mithilfe von JavaScript auf dem Bildschirm des Benutzers?

DDD
Freigeben: 2024-11-01 06:33:02
Original
1000 Leute haben es durchsucht

How to Center a Popup Window in the User's Screen Using JavaScript?

So zentrieren Sie ein Popup-Fenster auf dem Bildschirm des Benutzers mithilfe von JavaScript

So zentrieren Sie ein Popup-Fenster, das mit der Funktion window.open geöffnet wurde Es ist wichtig, die aktuelle Bildschirmauflösung des Benutzers zu berücksichtigen. Hier ist eine Lösung, die das Fenster sowohl bei Einzel- als auch bei Dual-Monitor-Setups effektiv zentriert:

<code class="javascript">const popupCenter = ({url, title, w, h}) => {
    // Handle dual-screen position
    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;

    // Get browser window dimensions
    const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
    const height = window.innerHeight || document.documentElement.clientHeight || screen.height;

    // Account for system zoom to obtain accurate dimensions
    const systemZoom = width / window.screen.availWidth;
    const left = (width - w) / 2 / systemZoom + dualScreenLeft
    const top = (height - h) / 2 / systemZoom + dualScreenTop
    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.example.com', title: 'Popup Window', w: 500, h: 300}); </code>
Nach dem Login kopieren

Dieses Code-Snippet öffnet ein Popup Fenster zentriert auf dem Bildschirm des Benutzers, mit einer angegebenen URL, einem Titel, einer angegebenen Breite und Höhe.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Popup-Fenster mithilfe von JavaScript auf dem Bildschirm des Benutzers?. 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage