ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用してポップアップ ウィンドウをユーザーの画面の中央に配置するにはどうすればよいですか?

JavaScript を使用してポップアップ ウィンドウをユーザーの画面の中央に配置するにはどうすればよいですか?

DDD
リリース: 2024-11-01 06:33:02
オリジナル
1035 人が閲覧しました

How to Center a Popup Window in the User's Screen Using JavaScript?

JavaScript を使用してポップアップ ウィンドウをユーザーの画面の中央に配置する方法

window.open 関数を使用して開いたポップアップ ウィンドウを中央に配置するには、次のようにします。ユーザーの現在の画面解像度を考慮することが重要です。シングル モニターとデュアル モニターの両方のセットアップでウィンドウを効果的に中央に配置するソリューションを次に示します。

<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>
ログイン後にコピー

使用例:

<code class="javascript">popupCenter({url: 'http://www.example.com', title: 'Popup Window', w: 500, h: 300}); </code>
ログイン後にコピー

このコード スニペットはポップアップを開きます指定された URL、タイトル、幅、高さを持つウィンドウがユーザーの画面の中央に配置されます。

以上がJavaScript を使用してポップアップ ウィンドウをユーザーの画面の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート