It is used to represent a dialog box or other interactive component, such as a dismissible alert, inspector or subwindow.
It has an attribute
open to indicate that the dialog is active and can be interacted with. When the
open attribute is not set, the dialog shouldn't be shown to the user.
tabindex attribute must not be used on the
<form> elements can close a dialog if they have the attribute
method="dialog". When such a form is submitted, the dialog closes with its
returnValue property set to the value of the button that was used to submit the form.
::backdrop CSS pseudo-element can be used to style behind a
<dialog> element when the dialog is displayed with
HTMLDialogElement.showModal(). For example, to dim unreachable content behind the modal dialog.
There is a way to create a dialog from scratch and make them accessible.
- Type: block
- Self-closing: No
- Semantic value: No