Dialog & Modal
A dialog is a component that may be displayed above the main content and often requests information or an action from the user
.
When a modal dialog is opened, it requires an action from the user. The main content is disabled until the user has interacted with the dialog.
When a nonmodal or modeless dialog is opened, the main content is not disabled and may be interacted with. Thus, interacting with the dialog is not enforced.
[nngroup.com]
The <dialog> element is used to represent a dialog [MDN].
A <form> element with method="dialog" will close the dialog when being submitted [MDN].
Resources
- w3.org/WAI/ARIA/apg/patterns/dialogmodal
- open-ui.org/components/dialog.research
- web.dev/building-a-dialog-component
- component.gallery/components/modal
- a11ysupport.io/tech/html/dialog_element
Modal Dialog
The <dialog> element can be opened as a modal with showModal() [MDN].
Opening a dialog with showModal() sets the focus to the first nested focusable element [MDN].
But browsers may have inconsistent behaviour regarding focus [matuzo.at].
The :modal pseudo-class matches an element which is in a state that excludes all interaction with elements outside it. For example, the dialog element is :modal when it has been opened with showModal(). [MDN, spec]
The content behind an open modal <dialog> may still be scrollable [whatwg/html#7732].
Modals are disruptive and, hence, should only be used where they are appropriate [modalzmodalzmodalz.com].