The HTML <dialog>
element represents a dialog box or other interactive component, such as a dismissable alert, inspector, or subwindow.
Content categories | Flow content, sectioning root |
---|---|
Permitted content | Flow content |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts flow content |
Implicit ARIA role | dialog |
Permitted ARIA roles | alertdialog |
DOM interface | HTMLDialogElement |
Attributes
This element includes the global attributes.
The tabindex
attribute must not be used on the <dialog>
element.
open
- Indicates 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.
Usage notes
<form>
elements can close a dialog if they have the attributemethod="dialog"
. When such a form is submitted, the dialog closes with itsreturnValue
property set to thevalue
of the button that was used to submit the form.- The
::backdrop
CSS pseudo-element can be used to style behind a<dialog>
element when the dialog is displayed withHTMLDialogElement.showModal()
. For example, to dim unreachable content behind the modal dialog.
Examples
Simple example
<dialog open> <p>Greetings, one and all!</p> </dialog>
Advanced example
This example opens a pop-up dialog box that contains a form, when the "Update details" button is clicked.
HTML
<!-- Simple pop-up dialog box containing a form --> <dialog id="favDialog"> <form method="dialog"> <p><label>Favorite animal: <select> <option></option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select> </label></p> <menu> <button value="cancel">Cancel</button> <button id="confirmBtn" value="default">Confirm</button> </menu> </form> </dialog> <menu> <button id="updateDetails">Update details</button> </menu> <output aria-live="polite"></output>
JavaScript
var updateButton = document.getElementById('updateDetails'); var favDialog = document.getElementById('favDialog'); var outputBox = document.querySelector('output'); var selectEl = document.querySelector('select'); var confirmBtn = document.getElementById('confirmBtn'); // "Update details" button opens the <dialog> modally updateButton.addEventListener('click', function onOpen() { if (typeof favDialog.showModal === "function") { favDialog.showModal(); } else { alert("The <dialog> API is not supported by this browser"); } }); // "Favorite animal" input sets the value of the submit button selectEl.addEventListener('change', function onSelect(e) { confirmBtn.value = selectEl.value; }); // "Confirm" button of form triggers "close" on dialog because of [method="dialog"] favDialog.addEventListener('close', function onClose() { outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString(); });
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<dialog>' in that specification. |
Living Standard | |
HTML 5.2 The definition of '<dialog>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
dialog | Chrome Full support 37 | Edge Full support 79 | Firefox
Full support
53
| IE No support No | Opera Full support 24 | Safari No support No | WebView Android Full support 37 | Chrome Android Full support 37 | Firefox Android
Full support
53
| Opera Android Full support 24 | Safari iOS No support No | Samsung Internet Android Full support 3.0 |
open | Chrome Full support 37 | Edge Full support 79 | Firefox
Full support
53
| IE No support No | Opera Full support 24 | Safari No support No | WebView Android Full support 37 | Chrome Android Full support 37 | Firefox Android
Full support
53
| Opera Android Full support 24 | Safari iOS No support No | Samsung Internet Android Full support 3.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
Polyfill
Include this polyfill to provide support for browsers without <dialog>
element.
See also
- The
close
event - The
cancel
event - HTML forms guide.
- The
::backdrop
pseudo-element