HTML の <dialog> 要素は、ダイアログボックスやインスペクターやウィンドウのようなそのほかの対話的コンポーネントを表します。

コンテンツカテゴリ フローコンテンツ, 区分化ルート
許可された内容 フローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツを受け入れるあらゆる要素
許可された ARIA ロール alertdialog
DOM インターフェイス HTMLDialogElement

属性

この要素はグローバル属性を含みます。tabindex 属性を <dialog> 要素で使用してはいけません。

open
ダイアログがアクティブで操作で使用できることを示します。open 属性が設定されていないときは、ユーザーに表示されません。

使用上の注意

  • method="dialog" 属性を指定することで、<form> 要素を dialog 内に統合できます。そのようなフォームが送信された場合、使用された送信ボタンの value 属性が returnValue 属性に設定されて、dialog が閉じられます。
  • CSS の ::backdrop 擬似要素を <dialog> 要素のスタイルに使用できます。たとえば、モーダルダイアログがアクティブな間にアクセスできないコンテンツを暗くすることができます。バックドロップは dialog 要素が dialog.showModal() で表示されている時だけ表示されます。

シンプルな例

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

応用的な例

この例では、"Update details" ボタンがクリックされると、フォームを含むダイアログボックスが開きます。

HTML

<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p><label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select></p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

JavaScript

(function() {
  var updateButton = document.getElementById('updateDetails');
  var cancelButton = document.getElementById('cancel');
  var favDialog = document.getElementById('favDialog');

  // Update button opens a modal dialog
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
  });

  // Form cancel button closes the dialog box
  cancelButton.addEventListener('click', function() {
    favDialog.close();
  });
})();

結果

仕様書

仕様書 状態 備考
HTML Living Standard
<dialog> の定義
現行の標準  
HTML 5.2
<dialog> の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応37 なし531 2 なし24 なし
open37 なし531 2 なし24 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応3737 なし531 2 なし なし あり
open3737 なし531 2 なし なし あり

1. See bug 840640.

2. From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

ポリフィル

古いブラウザーをサポートするには、このポリフィルを含めてください。

dialog-polyfill

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, YuichiNukiyama, hamasaki
最終更新者: mfuji09,