closedby="any" (default behavior)
Can be closed with ESC key, backdrop click, and close button.
Status: Closed
closedby="closerequest"Can be closed with ESC key and close button only. Backdrop clicks are ignored.
Status: Closed
closedby="none"Can only be closed with the close button. ESC key and backdrop clicks are ignored.
Status: Closed
You can change the closedBy attribute while the dialog is open.
Status: Closed
<button type="button" commandfor="my-dialog" command="show-modal">
モーダルを開く
</button>
<dialog
id="my-dialog"
closedby="any"
aria-labelledby="my-dialog-heading"
autofocus
>
<h1 id="my-dialog-heading">Heading</h1>
<p>Content</p>
<button type="button" commandfor="my-dialog" command="close">閉じる</button>
</dialog>
/** ダイアログ開閉時のアニメーション */
dialog {
position: fixed; /* Safariで表示に不具合があるので明示 */
inset: 0; /* Safariで表示に不具合があるので明示 */
overscroll-behavior-block: contain;
transition-duration: 300ms;
transition-property: display, overlay, opacity;
transition-timing-function: ease-out;
transition-behavior: allow-discrete;
&::backdrop {
background-color: oklch(from black l c h / 50%);
backdrop-filter: blur(4px);
transition-duration: inherit;
transition-property: opacity;
transition-timing-function: inherit;
}
&:modal,
&:modal::backdrop {
@starting-style {
opacity: 0;
}
}
&:not(:modal),
&:not(:modal)::backdrop {
opacity: 0;
}
}