目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性ただし、tabindex属性は指定禁止
  • openブーリアン属性。指定されていれば、それがアクティブで、かつ、ユーザーが操作しうることを示す。指定されてなければ、当該dialog要素は表示されない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、dialogデフォルトrolerole属性値に指定することは、推奨されない。
  • デフォルト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: white;
    color: black;
  }
  dialog::backdrop {background: rgba(0,0,0,0.1);}
  dialog:not([open]) {display: none;}
  

モーダルダイアログの場合は、さらに下記を適用。


  dialog {
    position: fixed;
    overflow: auto;
    inset-block-start: 0;
    inset-block-end: 0;
    max-width: calc(100% - 6px - 2em);
    max-height: calc(100% - 6px - 2em);
  }
  
意味・用法

例えばダイアログボックスインスペクタ、又はウィンドウといったユーザーがタスクを実行すると相互作用するアプリケーションの一部を表す。

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

私見・補足

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

Sectioning root最上位セクションとなるので、Heading contentによる見出し入れが推奨される。

表示確認

現在、Google Chrome 56以上が対応してる模様。

ソース

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