The <dialog>
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 |
This element includes the global attributes.
The tabindex
attribute must not be used on the <dialog>
element.
open
open
attribute is not set, the dialog shouldn't be shown to the user.<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.<dialog open> <p>Greetings, one and all!</p> </dialog>
This example opens a pop-up dialog box that contains a form, when the "Update details" button is clicked.
<!-- 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>
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(); });
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
dialog |
37 | 79 | 53
|
No | 24 | No |
open |
37 | 79 | 53
|
No | 24 | No |
Mobile | ||||||
---|---|---|---|---|---|---|
dialog |
37 | 37 | 53
|
24 | No | 3.0 |
open |
37 | 37 | 53
|
24 | No | 3.0 |
Include this polyfill to provide support for browsers without <dialog>
element.
close
eventcancel
event::backdrop
pseudo-element
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog