<dialog>

対応:		HTML 5.1（2016）

『dialog』はHTMLネイティブのダイアログボックス（モーダル・ポップアップ）を作成するための要素で、JavaScriptの『showModal()』『close()』メソッドや『open』属性で表示を制御します。

構文

<!-- 通常のダイアログ（非モーダル） -->
<dialog open>
  <p>ダイアログのコンテンツ</p>
</dialog>

<!-- モーダルダイアログ（JavaScriptで開く） -->
<dialog id="myDialog">
  <p>モーダルの内容</p>
  <button id="closeBtn">閉じる</button>
</dialog>

<button id="openBtn">ダイアログを開く</button>

<script>
  const dialog = document.getElementById('myDialog');
  document.getElementById('openBtn').addEventListener('click', () => {
    dialog.showModal(); // モーダルとして開く
  });
  document.getElementById('closeBtn').addEventListener('click', () => {
    dialog.close(); // 閉じる
  });
</script>

属性・メソッド一覧

属性 / メソッド	概要
open	ダイアログを表示状態にするHTML属性です。この属性がない場合は非表示になります。
showModal()	ダイアログをモーダルとして開きます。背景に半透明のオーバーレイが表示され、ダイアログの外側はクリックできなくなります。
show()	ダイアログを非モーダルとして開きます。背景のコンテンツも操作できます。
close()	ダイアログを閉じます。引数を渡すと『returnValue』プロパティに値をセットできます。
returnValue	ダイアログが閉じられた際の戻り値を保持するプロパティです。フォームの送信ボタンの値などが入ります。
::backdrop	モーダル表示中の背景オーバーレイをCSSでスタイリングできる疑似要素です。

サンプルコード

sample_dialog.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    /* ダイアログのスタイル */
    dialog {
      border: none;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
      max-width: 400px;
      width: 90%;
    }
    dialog h2 {
      margin-top: 0;
    }
    /* 背景オーバーレイ */
    dialog::backdrop {
      background: rgba(0, 0, 0, 0.5);
    }
    .dialog-buttons {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 16px;
    }
  </style>
</head>
<body>

  <button id="openBtn">削除の確認</button>

  <!-- 確認ダイアログ -->
  <dialog id="confirmDialog">
    <h2>本当に削除しますか？</h2>
    <p>この操作は取り消せません。</p>
    <div class="dialog-buttons">
      <!-- formタグを使うとEnterキーや送信ボタンでダイアログを閉じられる -->
      <form method="dialog">
        <button value="cancel">キャンセル</button>
        <button value="confirm">削除する</button>
      </form>
    </div>
  </dialog>

  <p id="result"></p>

  <script>
    const dialog = document.getElementById('confirmDialog');
    const result = document.getElementById('result');

    // ダイアログを開く
    document.getElementById('openBtn').addEventListener('click', () => {
      dialog.showModal();
    });

    // ダイアログが閉じられたときの処理
    dialog.addEventListener('close', () => {
      if (dialog.returnValue === 'confirm') {
        result.textContent = '削除しました。';
      } else {
        result.textContent = 'キャンセルしました。';
      }
    });
  </script>

</body>
</html>

実行結果

「削除の確認」ボタンをクリックすると、背景が暗くなりモーダルダイアログが中央に表示されます。「削除する」ボタンを押すと「削除しました。」、「キャンセル」を押すと「キャンセルしました。」とページに表示されます。

サンプルページはこちら

CSSアニメーションを付ける

ダイアログの表示・非表示にCSSアニメーションを加えることで、より滑らかなUIになります。

<style>
  /* ダイアログ本体のアニメーション（上からスライドイン） */
  dialog {
    border: none;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 90%;
    animation: dialog-open 0.25s ease-out;
  }

  @keyframes dialog-open {
    from {
      opacity: 0;
      transform: translateY(-20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* 背景オーバーレイのフェードイン */
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    animation: backdrop-open 0.25s ease-out;
  }

  @keyframes backdrop-open {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ダイアログ内のボタン配置 */
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
  }
</style>

<button id="openAnimDialog">ダイアログを開く</button>

<dialog id="animDialog">
  <h2 style="margin-top:0">確認</h2>
  <p>この操作を実行しますか？</p>
  <div class="dialog-footer">
    <form method="dialog">
      <button value="cancel">キャンセル</button>
      <button value="ok" style="background:#4a90e2;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;">実行</button>
    </form>
  </div>
</dialog>

<script>
var dialog = document.getElementById('animDialog');
document.getElementById('openAnimDialog').addEventListener('click', function() {
  dialog.showModal();
});
dialog.addEventListener('close', function() {
  console.log('選択値:', dialog.returnValue);
});
</script>

概要

HTML5.2で追加された『dialog』要素は、JavaScriptとCSSで実装していた確認ダイアログやモーダルウィンドウをHTMLネイティブで作成できます。以前はdiv要素とCSSで自作するか、jQueryのプラグインなどを使う必要がありましたが、『dialog』要素を使うことでアクセシビリティ（フォーカス管理・キーボード操作・スクリーンリーダー対応）が自動的に処理されます。

『showModal()』で開いたモーダルダイアログは、Escキーを押すと自動的に閉じます。またフォーカスはダイアログ内に閉じ込められ（フォーカストラップ）、Tabキーで背景のコンテンツに移動できなくなります。これらはアクセシビリティの観点から非常に重要な挙動で、div要素で自作したモーダルで同等の動作を実現するには多くのJavaScriptコードが必要でしたが、『dialog』要素はこれをブラウザが自動で処理します。

ダイアログ内に『form method="dialog"』を配置すると、フォームの送信がダイアログの『close()』に対応します。送信ボタンの『value』属性が『dialog.returnValue』にセットされるため、どのボタンで閉じられたかをJavaScriptで判定できます。CSSの『::backdrop』疑似要素でモーダル時の背景オーバーレイのスタイルを自由にカスタマイズできます。