Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Mary-Kate Olsen
Freigeben: 2024-10-30 10:30:02
Original
867 Leute haben es durchsucht

How Can I Center a Popup Window on the Screen Using JavaScript?

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>
Nach dem Login kopieren

Nutzungsbeispiel

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

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!

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