MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

HTML <dialog> 要素は、ダイアログボックスやインスペクターやウィンドウのようなそのほかのインタラクティブコンポーネントを表します。method="dialog"属性を指定することで、ダイアログ<form>要素を統合できます。このようなフォームが送信されたとき、returnValue属性が送信ボタンの値に設定されて閉じられます。

::backdropCSS擬似セレクタを<dialog>要素のスタイルとして使用できます。たとえば、モーダルダイアログがアクティブになっている時に、アクセスできない背景を暗くする場合に使用します。

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

属性

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

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

例 1

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

例 2

<!-- 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" name="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>

<script>
  (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();
    });

  })();
</script>

仕様

仕様 状態 コメント
WHATWG HTML Living Standard
<dialog> の定義
現行の標準  
HTML5.1
<dialog> の定義
草案 Initial definition

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 37 未サポート[1] 未サポート 24 未サポート
Anchor points 未サポート 未サポート 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 37 未サポート 未サポート 未サポート 未サポート
Anchor points 未サポート 未サポート 未サポート 未サポート 未サポート

[1] See バグ 840640.

関連項目

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

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