Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<dialog>

『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でスタイリングできる疑似要素です。

サンプルコード

<!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>

実行結果

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

<!-- 動作フロー -->
「削除の確認」ボタンクリック
  ↓
┌─────────────────────┐
│ 本当に削除しますか？  │
│ この操作は取り消せません。 │
│             [キャンセル] [削除する] │
└─────────────────────┘
（背景は暗くなりクリック不可）

「削除する」クリック → ダイアログが閉じる → 「削除しました。」表示
「キャンセル」クリック → ダイアログが閉じる → 「キャンセルしました。」表示

概要

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』疑似要素でモーダル時の背景オーバーレイのスタイルを自由にカスタマイズできます。