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!