ポップアップ ウィンドウをブラウザの中央に配置するにはどうすればよいですか?

ポップアップ ウィンドウを画面の中央に正確に配置する方法

JavaScript の window.open 関数を使用して作成されたポップアップ ウィンドウを画面の中央に配置します。最適なユーザー エクスペリエンスには画面が不可欠です。正確な座標は画面の解像度に依存するため、動的なソリューションが必要です。

ソリューション: シングル/デュアル モニター機能を活用する

シングル モニターとデュアル モニターの両方に対応する堅牢なソリューションデュアル モニターのセットアップは以下のとおりです:

<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>

使用例:

<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 中国語 Web サイトの他の関連記事を参照してください。