dialog 要素ダイアログを表す

dialog 要素は閲覧者が操作することが可能なダイアログを表します。

open 属性が指定された dialog 要素は初期状態で表示され、閲覧者が操作可能です。open 属性が指定されていない dialog 要素はレンダリングされません。open 属性は論理属性です。

dialog 要素は、HTML5.1 仕様書 (HTML5.1 W3C Recommendation 1 November 2016) には含まれていません。HTML 5.2 で策定が行われています。

さらに詳細な説明を見る

サンプルソースを見る

dialog 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈
  • フロー・コンテンツが期待される場所
この要素で使用できる属性
DOM インタフェース
interface HTMLDialogElement : HTMLElement {
  attribute boolean open;
  attribute DOMString returnValue;
  void show(optional (MouseEvent or Element) anchor
);
  void showModal(optional (MouseEvent or Element) anchor
);
  void close(optional DOMString returnValue
);
};

詳細説明

ダイアログの操作

HTML5 仕様書には dialog 要素によるダイアログを操作するための特別なメソッドが定義されています。

dialog.show([anchor])
dialog 要素を表示します。引数はこの要素を固定する位置です。
dialog.showModal([anchor])
dialog 要素を最上位の重ね順で表示し、さらにオートフォーカスします。引数はこの要素を固定する位置です。
dialog.close([result])
dialog 要素を閉じます。引数は戻り値です。
dialog.returnValue [= result]
dialog の戻り値を返します。値をセットすることもできます。

dialog 要素のサンプルソース

<dialog id="dialog">
 <p>ダイアログを表示</p>
</dialog>
 
<button type="button" onclick="document.getElementById('dialog').dialog.show();">
 ボタンを押すとダイアログを表示
</button>
<!-- open 属性を付与すれば最初から表示されます -->
<dialog open="">
 <p>ダイアログを表示</p>
</dialog>
<dialog open="open">
 <p>ダイアログを表示</p>
</dialog>
<dialog open>
 <p>ダイアログを表示</p>
</dialog>

W3C HTML5 仕様書

4.11.7. The dialog element