HTMLのdialog要素の説明です。dialog要素は、閲覧者が操作可能なダイアログを定義する要素です。
目次
要素の記述例
dialog要素の記述例
<dialog id="dialog" open>
<h1>タイトル</h1>
<p>本文</p>
<div><input type=button onclick="document.getElementById('dialog').close();" value="閉じる"></div>
</dialog>
閲覧中ブラウザーでの表示結果
要素の説明
- dialog要素は、閲覧者が操作可能なダイアログを定義する要素です。
利用できる属性
属性名 | 属性の説明 |
---|---|
open | 要素内容の表示・非表示状態を定義する[link-html-ref-format_bool]です。 |
グローバル属性
HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。
イベントハンドラ属性
dialog要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。
ブラウザデフォルトCSS設定
Google Chromeの場合
dialog要素のブラウザデフォルトCSS
dialog {
display: block;
position: absolute;
left: 0px;
right: 0px;
width: -webkit-fit-content;
height: -webkit-fit-content;
color: black;
margin: auto;
border-width: initial;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 1em;
background: white;
}
dialog::backdrop {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.1);
}