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

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>

Verwendungsbeispiel:

<code class="javascript">popupCenter({url: 'http://www.example.com', title: 'Popup Window', w: 500, h: 300}); </code>

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!