目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性ただし、tabindex属性は指定禁止
  • openブーリアン属性。指定されていれば、それがアクティブで、かつ、ユーザーが操作しうることを示す。指定されてなければ、当該dialog要素は表示されない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、dialogデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外では、alertdialogを指定可。
視覚系ブラウザデフォルトとして期待されるCSS

  dialog {
    display: block;
    position: absolute;
    offset-inline-start: 0;
    offset-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;}
  
意味・用法

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

私見・補足

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

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

表示確認

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

ソース

  dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。
  <div>
    <button type="button" onclick="document.getElementById('dialog').show();">
      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の内容。

未対応ブラウザでは、最初から全部表示されてしまい、ダイアログボックスとして機能しない。

IE6表示のスクリーンショット
IE6表示:非表示なはずの内容も表示されておりダイアログボックスとしては機能しない

IE7からIE11も同様。