dialog要素：HTML Living Standard各要素別メモ

概要

カテゴリー

Flow content

配置できる場所

上記カテゴリーの要素が置ける場所。

内容モデル

Flow content

main要素の規定による制限
- main要素を子孫に含んではならない。

属性

グローバル属性（ただし、tabindex属性は指定禁止）
closedby→値は下記のとおり。ダイアログボックスを閉じる操作の初期設定。デフォルトは、モーダルダイアログの場合はcloserequest、そうでない場合はnone
- any→閉消要求行為に応答する。簡易払拭機能あり。
- closerequest→閉消要求行為に応答する。
- none→設定なし（＊別途スクリプトなどで閉じる仕組みを実装する必要がある）。
open→ブーリアン属性。指定されていれば、それがアクティブで、かつ、ユーザーが操作しうることを示す（→モードレスダイアログで開く）。指定されてなければ、当該dialog要素は表示されない。

HTML構文におけるタグの省略

省略不可。

WAI-ARIA

デフォルトroleは、dialog。デフォルトroleをrole属性値に指定することは、推奨されない。
デフォルトrole以外では、alertdialogを指定可。

視覚系ブラウザのデフォルトとして期待されるCSS


  dialog {
    display: block;
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 1em;
    background-color: Canvas;
    color: CanvasText;
  }

  dialog:modal {
    position: fixed;
    overflow: auto;
    inset-block: 0;
    max-width: calc(100% - 6px - 2em);
    max-height: calc(100% - 6px - 2em);
  }

  dialog::backdrop {background: rgba(0,0,0,0.1);}
  dialog:not([open]) {display: none;}

意味・用法

タスクを実行したり情報を収集したりするためにユーザーと対話する小さなウィンドウ（→ダイアログボックス）という形態で、アプリケーションの一時的な部分を表す。

ユーザーの操作が完了すると、ダイアログボックスはアプリケーションによって自動的に閉じられるか、ユーザーによって手動で閉じられる。

コンテキストメニュー、ツールチップ、ポップアップリストボックスなどに、この要素を使用するのは、正しくない。

モーダルダイアログとして表示された場合は、「当該要素及びその子孫要素」以外を不活性にする。

私見・補足

開閉の動作を制御する主な手段は下記のとおり。

開閉：button要素などのクリックイベントなどに関連付けられた開閉を制御するスクリプト
開閉：上記以外でも、イベントに関連付けられた開閉を制御するスクリプト
開閉：commandfor属性及びcommand属性が指定されたbutton要素
開：open属性
閉：それが有効な場合は、簡易払拭機能
閉：それが有効な場合は、閉消要求行為
閉：method属性値にdialogが指定されたform要素
閉：formmethod属性値にdialogが指定されたbutton要素又はinput要素

表示確認

ソース１


  dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。
  <div>
    <button type="button" onclick="document.getElementById('dialog1').showModal();">
      モーダルダイアログでdialogを表示するボタン
    </button>
  </div>
  <dialog id="dialog1" onclose="document.getElementById('result1').value=this.returnValue;">
    <span>ダイアログ１</span>
    <form method="dialog">
      <div><button type="submit" name="submit1" value="ボタン１が押されたよ">ボタン１</button></div>
      <div><button type="submit" name="submit2" value="ボタン２が押されたよ">ボタン２</button></div>
    </form>
    <button type="button" onclick="document.getElementById('dialog1').close();">
      dialogを閉じるボタン
    </button>
  </dialog>
  <label>ダイアログ１のフォームで押されたボタン→<output id="result1"></output></label>

表示結果１

dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。

ダイアログ１のフォームで押されたボタン→

ソース２


  dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。
  <div>
    <button type="button" commandfor="dialog2" command="show-modal">
      モーダルダイアログでdialogを表示するボタン
    </button>
  </div>
  <dialog id="dialog2" onclose="document.getElementById('result2').value=this.returnValue;">
    <span>ダイアログ２</span>
    <form method="dialog">
      <div><button type="submit" name="submit3" value="ボタン３が押されたよ">ボタン３</button></div>
      <div><button type="submit" name="submit4" value="ボタン４が押されたよ">ボタン４</button></div>
    </form>
    <button type="button" commandfor="dialog2" command="close">
      dialogを閉じるボタン
    </button>
  </dialog>
  <label>ダイアログ２のフォームで押されたボタン→<output id="result2"></output></label>

表示結果２

dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。

ダイアログ２のフォームで押されたボタン→