Wie kann ich mit JavaScript ein Popup-Fenster auf dem Bildschirm zentrieren?

Zentrieren eines Popup-Fensters

Das Zentrieren eines Popup-Fensters auf dem Bildschirm kann mit der Funktion window.open von JavaScript erreicht werden. Die genauen Koordinaten (x und y), an denen das Fenster angezeigt wird, variieren je nach aktueller Bildschirmauflösung.

Plattformübergreifende Lösung

Die folgende Lösung funktioniert für beide Einzel- und Dual-Monitor-Setups:

<code class="js">const popupCenter = ({ url, title, w, h }) => {
  // Adjust for dual-screen positions
  const dualScreenLeft = window.screenLeft || window.screenX;
  const dualScreenTop = window.screenTop || window.screenY;

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

  // Calculate the scaling factor
  const systemZoom = width / window.screen.availWidth;

  // Calculate the window's position
  const left = (width - w) / 2 / systemZoom + dualScreenLeft;
  const top = (height - h) / 2 / systemZoom + dualScreenTop;

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

  // Focus the new window
  if (window.focus) newWindow.focus();
};</code>

Nutzungsbeispiel

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

Credit

Diese Lösung ist angepasst von http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript ein Popup-Fenster auf dem Bildschirm zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!