如何使彈出視窗在瀏覽器中居中？

如何將彈出視窗精確定位在螢幕中央

將使用JavaScript 的window.open 函數建立的彈出視窗居中螢幕對於最佳視窗居中螢幕對於最佳使用者體驗至關重要。確切的座標取決於螢幕分辨率，因此需要動態解決方案。

解決方案：利用單/雙顯示器功能

一個強大的解決方案，可同時容納單顯示器和雙顯示器雙顯示器設定如下：

<code class="javascript">const popupCenter = ({ url, title, w, h }) =&gt; {
    // 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>

使用範例：

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

鳴謝和來源：

這個解決方案最初來自http://www. xtf.dk/2011/08/center-new-popup-window-even-on.html，有效處理各種螢幕配置的彈出視窗居中。

以上是如何使彈出視窗在瀏覽器中居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！