Window.openを使ってモーダル作成

ウィンドウオブジェクトのメソッドopenを使って、モーダルを作成したいと思います。

以下、用語の説明がありますが、知っている方は読み飛ばして問題ありません。

モーダルとは

画面の上に別のウィンドウを表示し、ユーザーに情報を伝える画面のことを指します。

表示された別ウィンドウで特定の操作を行わないとほかの操作ができません。

したがって、モーダルは、画面上の操作をコントールすることを目的として利用されます。

Window.openとは

ブラウザで表示されるウィンドウオブジェクト(window)のopenメソッドであり、ウィンドウを生成します。

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

ソースコード

親画面

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ParentWindow</title>
  </head>
  <style>
    #layer{
      background: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0px;
      right: 0px;
      left: 0px;
      bottom: 0px;
      z-index: -1;
      visibility: hidden;
    }
    #layer.is-open{
    z-index: 100;
    visibility: visible;
    }
  </style>
  <body>
    <div id="layer"></div>
    <p>あなたが入力した値は、"<span id="outputText"></span>"です。</p>
    <button onclick="overlay()">子ウィンドウ</button>
    <script>
    function overlay(){
      const layer = document.getElementById("layer");
      // オーバーレイを表示
      layer.classList.add("is-open");
      // 子画面を生成
      const wWidth = 300;
      const wHeight = 500;
      const wTop = window.screenTop + (window.innerHeight / 2) - (wHeight / 2);
      const wLeft = window.screenLeft + (window.innerWidth / 2) - (wWidth / 2);
      window.open("subWindow.html",self,"height=" + wHeight + ",width=" + wWidth + ",top=" + wTop + ",left=" + wLeft);
    }
    function addText(inputText) {
      // 子画面からの値を取得＆表示
      document.getElementById("outputText").textContent = inputText;
    }
    function closeWindow() {
      // オーバーレイを閉じる
      const layer = document.getElementById("layer");
      layer.classList.remove("is-open");
    }
   </script>
  </body>
</html>

子画面

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>childWindow</title>
  </head>
  <body>
    <input id="text">
    <button onclick="closeWindow()">閉じる</button>
    <script>
    function closeWindow() {;
      // オーバーレイを閉じる
      window.opener.closeWindow();
      // 値を親画面へ渡す
      const inputText = document.getElementById("text").value;
      window.opener.addText(inputText);
      // 自画面を閉じる
      window.close();
    }
    window.addEventListener("beforeunload",() => {
      // オーバーレイを閉じる
      window.opener.closeWindow();
      window.close();
    });
    </script>
  </body>
</html>