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

dialog要素説明
カテゴリー・フローコンテンツ
コンテンツモデルフローコンテンツ
使用できる場所フローコンテンツが期待される場所

dialog要素で使用できる属性

すべてのHTML要素で使用できる属性になります。

属性値は論理属性。

open属性は、details要素、およびdialog要素において、初期状態で展開された状態を指定する。

open属性が指定されたdetails要素の内容、dialog要素は初期状態で表示され、閲覧者が操作可能です。open属性が指定されていないdetails要素は初期状態で内容が折りたたまれ、dialog要素はレンダリングされない。

使用例

<body>
 <dialog id="dialog">
   <p">ダイアログが表示されました!</p>
   <button type="button" onclick="document.getElementById('dialog').close();">ダイアログを閉じる</button>
 </dialog>
 <button type="button" onclick="document.getElementById('dialog').show();">ボタンを押すとダイアログを表示</button>
</body>

表示

ダイアログが表示されました!

カテゴリー: