<dialog>要素の定義
英語で「対話」を表す”dialog”より。
ダイアログボックスやインスペクターやウィンドウのようなそのほかの対話的コンポーネントを表します。
<form> 要素にmethod=”dialog” 属性を指定することで、フォームの送信先を <dialog> 要素にすることができます。そのようなフォームが送信された場合、フォームの使用された送信ボタンの value 属性が returnValue 属性に設定されて、ダイアログが閉じられます。
CSS の ::backdrop 擬似要素を <dialog> 要素のスタイルに使用できます。たとえば、モーダルダイアログがアクティブな間にアクセスできないコンテンツを暗くすることができます。バックドロップは dialog 要素が HTMLDialogElement.showModal() で表示されている時だけ表示されます。
子要素として使えるもの
フローコンテンツ
親要素として使えるもの
フローコンテンツを受け入れるすべての要素。
許可されているARIAロール
alertdialog
DOMインターフェース
HTMLDialogElement
属性
グローバル属性が指定できます。
open
ダイアログがアクティブで操作で使用できることを示します。 open 属性が設定されていないときは、ダイアログはユーザーに表示されません。
サンプル
See the Pen dialog by Masahiko Iwakiri (@m-iwakiri) on CodePen.
このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
コメント