【HTML & JavaScript】モーダルウィンドウの作り方

簡単なモーダルウィンドウの作り方。

dialogとは

dialogとはHLML要素のひとつでポップアップウィンドウを作成するために使う。

必ずJavaScriptとの併用が必要で以下の2種類がある。

モードレスダイアログ：表示中でもモーダルウィンドウ以外の操作ができる
モーダルダイアログ：表示中はモーダルウィンドウ以外の操作ができなくなる

dialogはGoogle ChromeとOperaにのみ対応しているため、未対応ブラウザで表示したいときは注意が必要。

作り方

HTMLとJavaScriptを使って以下のように記載する。

html

<dialog>
  <!-- モーダルウィンドウ内のテキストの指定 -->
  <p>これはモーダルダイアログのウィンドウ画面です</p>
  <!-- モーダルウィンドウ内を閉じるボタンの指定 -->
  <button id="close">モーダルウィンドウを閉じる</button>
</dialog>
<!-- モーダルウィンドウ内を開くボタンの指定 -->
<button id="open">モーダルウィンドウを開く</button>
    
<script>
  let dialog = document.querySelector('dialog'); // dialog（モーダルダイアログ）の宣言
  let btn_open = document.getElementById('open'); // open（開く）ボタンの宣言
  let btn_close = document.getElementById('close'); // close（閉じる）ボタンの宣言
  btn_open.addEventListener('click', function() { 
  // 開くボタンをクリックした場合の処理
  dialog.showModal();
  }, false);
  btn_close.addEventListener('click', function() {
  // 閉じるボタンをクリックした場合の処理
  dialog.close();
  }, false);
</script>

上述で以下のようなものが作れる。
あとはCSSで位置や背景もカスタマイズする。