1. ホーム
  2. ジャバスクリプト

[解決済み】ポップアップウィンドウを画面中央に表示する?

2022-03-27 07:52:48

質問

javascriptで開いたポップアップウィンドウを中央に配置するにはどうしたらよいでしょうか。 window.open 関数は、現在選択されている画面解像度に対応した画面中央の変数を使用しますか?

解決方法は?

シングル/デュアルモニター機能 (クレジット http://www.xtf.dk - ありがとうございました!)

UPDATE: @Frostのおかげで、画面の幅と高さが最大でないウィンドウでも動作するようになりました!

デュアルモニタの場合、ウィンドウは水平方向にはセンタリングされますが、垂直方向にはされません...この機能を使用して、それを考慮してください。

const popupCenter = ({url, title, w, h}) => {
    // Fixes dual-screen position                             Most browsers      Firefox
    const dualScreenLeft = window.screenLeft !==  undefined ? window.screenLeft : window.screenX;
    const dualScreenTop = window.screenTop !==  undefined   ? window.screenTop  : window.screenY;

    const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    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();
}

使用例です。

popupCenter({url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500});  

credit goes to: http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html (このページにリンクしたかったのですが、このウェブサイトがダウンした場合に備えて、コードはSOのここにあります、乾杯!)