So positionieren Sie ein Popup-Fenster genau in der Mitte des Bildschirms
Zentrieren eines Popup-Fensters, das mit der window.open-Funktion von JavaScript erstellt wurde Der Bildschirm ist für ein optimales Benutzererlebnis unerlässlich. Die genauen Koordinaten hängen von der Bildschirmauflösung ab, daher ist eine dynamische Lösung erforderlich.
Lösung: Nutzen Sie eine Einzel-/Doppelmonitorfunktion
Eine robuste Lösung, die beide Einzelmonitore unterstützt und Dual-Monitor-Setups ist unten angegeben:
<code class="javascript">const popupCenter = ({ url, title, w, h }) => { // Determine the positions based on screen resolution const dualScreenLeft = window.screenLeft || window.screenX; const dualScreenTop = window.screenTop || window.screenY; const width = window.innerWidth || document.documentElement.clientWidth || screen.width; const height = window.innerHeight || document.documentElement.clientHeight || screen.height; // Adjust for system zoom const systemZoom = width / window.screen.availWidth; // Calculate the centered coordinates const left = (width - w) / 2 / systemZoom + dualScreenLeft; const top = (height - h) / 2 / systemZoom + dualScreenTop; // Open the popup window with the calculated dimensions and positioning 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.xtf.dk', title: 'xtf', w: 900, h: 500 }); </code>
Credits und Quelle:
Diese Lösung, ursprünglich von http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html, handhabt effektiv die Zentrierung von Popup-Fenstern für eine Vielzahl von Bildschirmkonfigurationen.
Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Popup-Fenster im Browser?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!