HTML <dialog> Element
The <dialog> element represents a dialog box or other interactive component that appears separately from the main page content. It can be used for messages, confirmations, forms, settings, and other information that requires the visitor's attention or interaction.
Syntax
<dialog open>
<p>This is an open dialog box.</p>
</dialog>The open attribute makes the <dialog> visible when the page is displayed. Dialogs can also be opened and closed programmatically when interactive modal behavior is needed.
Attributes
The <dialog> element supports the global HTML attributes and the following element-specific attribute:
| Attribute | Description |
|---|---|
open |
Specifies that the dialog is open and visible to the visitor. |
Example
The following example displays a non-modal dialog using the open attribute so its basic structure and appearance can be viewed without JavaScript:
Usage Notes
The <dialog> element can represent either a non-modal dialog or a modal dialog. A non-modal dialog allows interaction with other page content, while a modal dialog temporarily restricts interaction to the dialog.
The open attribute can make a dialog visible, but it does not create modal behavior. Modal dialogs are normally opened using the showModal() method, while non-modal dialogs can be opened using the show() method.
A dialog can be closed with the close() method or through supported dialog controls such as a form submitted with method="dialog".
When a modal dialog is opened with showModal(), the browser places it in the top layer and prevents interaction with content outside the dialog until it is closed.
Accessibility
Give each dialog a clear heading or other accessible label so visitors can quickly understand its purpose when it opens.
Modal dialogs should provide an obvious way to close or complete the interaction. Native modal dialog behavior also helps manage keyboard focus and prevents users from interacting with page content outside the active dialog.
Avoid placing the tabindex attribute directly on the <dialog> element. Interactive controls within the dialog should receive keyboard focus instead.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <dialog> Element .
Related Elements
<form> - Can contain controls used to submit information or close a dialog using method="dialog".
<button> - Provides an interactive control that can be used to perform actions within a dialog.