Heim > Artikel > Web-Frontend > 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!