JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

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

JavaScriptでポップアップウィンドウ（サブウィンドウ）を画面の中央に表示したい場合は、window.open()メソッドとscreenオブジェクトを組み合わせることで簡単に実現できます。以下のコードを実行して動作を確認してみてください。

画面中央に配置する仕組み

ポップアップウィンドウを中央に配置するには、次の計算式で表示位置（座標）を求めます。

  • left（横位置）：(screen.width − ウィンドウ幅) ÷ 2
  • top（縦位置）：(screen.height − ウィンドウ高さ) ÷ 4 ／ 厳密な上下中央にする場合は ÷ 2

このようにして求めた座標をwindow.open()の第3引数（features）に渡すことで、指定した位置にポップアップウィンドウが開きます。

サンプルコード

ボタンをクリックすると、画面中央にポップアップウィンドウが開く完全なHTMLの例です。

<!DOCTYPE html>
<html>
   <body>
      <script>
         function myPopup(myURL, title, myWidth, myHeight) {
            var left = (screen.width - myWidth) / 2;
            var top = (screen.height - myHeight) / 4;
            var myWindow = window.open(myURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + myWidth + ', height=' + myHeight + ', top=' + top + ', left=' + left);
         }
      </script>
      <button onclick="myPopup('https://www.qries.com', 'web', 1050, 550);">Qries.comを開く</button>
   </body>
</html>

コードの解説

  • myPopup関数：URL、タイトル、幅、高さの4つの引数を受け取り、ポップアップウィンドウを生成します。
  • left変数：画面幅からウィンドウ幅を引いて2で割り、左右中央のX座標を算出します。
  • top変数：画面高さからウィンドウ高さを引いて4で割り、やや上寄りのY座標を算出します。完全な上下中央にしたい場合は2で割ってください。
  • window.open()の第3引数：ツールバーやメニューバーなどのUI要素を非表示にし、width・height・top・leftでサイズと位置を指定しています。

注意点

近年のブラウザにはポップアップブロッカーが搭載されており、ユーザーの操作以外でwindow.open()を呼び出すとブロックされる場合があります。また、マルチモニター環境ではscreen.widthがプライマリモニターのサイズを返すため、意図しない位置に表示されることがあります。タスクバーなどを除いた実際の利用可能領域を基準にしたい場合は、screen.availWidthやscreen.availHeightを使う方法も検討するとよいでしょう。

  1. 【Python】Tkinterでウィンドウを画面の中央に配置する方法

    Tkinterで作成したウィンドウを画面の中央に配置したいケースはよくあります。本記事では、tk::PlaceWindow メソッドを使った簡単な方法と、ジオメトリ（geometry）を計算してプログラム的に中央へ配置する方法の2つを紹介します。 方法1：tk::PlaceWindow を使う（最も簡単） Tkinterには、ウィンドウを画面中央に配置するための組み込みコマンド tk::PlaceWindow が用意されています。このメソッドに対象となるトップレベル（toplevel）ウィンドウを引数として渡し、配置位置として「center」を指定するだけで、ウィンドウを画面の中央に表示でき

  2. Tkinterでスプラッシュ画面を作成する方法をわかりやすく解説

    アプリケーションを起動した際に一瞬だけ表示される「スプラッシュ画面」。ロゴや読み込み中表示などを映し出すことで、アプリに洗練された印象を与えられます。Pythonの標準GUIライブラリであるTkinterを使えば、このスプラッシュ画面も簡単に実装できます。スプラッシュ画面作成の基本手順Tkinterでスプラッシュ画面を作成するには、以下の手順に従います。ラベルなどを配置したスプラッシュ画面を作成するoverrideredirectメソッドを使って、スプラッシュ画面を枠なし（ボーダーレス）にするスプラッシュ画面の直後に表示されるメインウィンドウを生成する関数を定義するafterメソッドを使って、