目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性（ただし、tabindex属性は指定禁止）
  • 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;}
意味・用法

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

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

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

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

私見・補足

open属性の状態は、スクリプトで変更できる。ボタンのクリックイベントに該当するスクリプトを組み込むのが通例だろうか。

表示確認

ソース

  dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。
  <div>
    <button type="button" onclick="document.getElementById('dialog').showModal();">
      モーダルダイアログでdialogを表示するボタン
    </button>
  </div>
  <dialog id="dialog" onclose="document.getElementById('result').value=this.returnValue;">
    <span>最初は非表示なはずのdialogの内容。</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('dialog').close();">
      dialogを閉じるボタン
    </button>
  </dialog>
  <label>ダイアログのフォームで押されたボタン→<output id="result"></output></label>
表示結果
dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。
最初は非表示なはずのdialogの内容。