dialogタグ
使いみち
クッキーポリシーでユーザーに許可を取る画面やformパーツ内で群を埋め込むときに使える。CSSとJSの実装も比較的簡単。
デフォルトのCSS
/* CSS (chrome) */
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;
}CSSでの加飾とJSでの動きの制御が必要になってくるのでHTML単体でのコントロールは無理となる。挙動としてはdialogタグにopen属性を与えることでビューに表示されるのでデフォルトでは非表示要素となる。
dialogタグ自体は表示させる要素の加飾となるので外側の領域を加飾するにはbackdrop疑似要素にCSSを落とし込む形になる。
JSでのコントロールは.showModal()と.close()をクリックイベントに落とし込むことになる。