The HTML <dialog>
element represents a dialog box or other interactive component, such as an inspector or window.
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 |
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 available for interaction. When the open attribute is not set, it shouldn't be shown to the user.
Usage notes
<form>
elements can be integrated within a dialog by specifying them with the attributemethod="dialog"
. When such a form is submitted, the dialog is closed with areturnValue
attribute set to thevalue
of the submit button used.- The
::backdrop
CSS pseudo-element can be used to style behind a<dialog>
element, for example to dim inaccessible content whilst a modal dialog is active.
Examples
Simple example
<dialog open> <p>Greetings, one and all!</p> </dialog>
Advanced example
This example opens a pop-up dialog box containing a form when the "Update details" button is clicked.
HTML
<!-- Simple pop-up dialog box, containing a form --> <dialog open id="favDialog"> <form method="dialog"> <section> <p><label for="favAnimal">Favorite animal:</label> <select id="favAnimal"> <option></option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">Cancel</button> <button type="submit">Confirm</button> </menu> </form> </dialog> <menu> <button id="updateDetails">Update details</button> </menu>
JavaScript
(function() { var updateButton = document.getElementById('updateDetails'); var cancelButton = document.getElementById('cancel'); var favDialog = document.getElementById('favDialog'); // Update button opens a modal dialog updateButton.addEventListener('click', function() { favDialog.showModal(); }); // Form cancel button closes the dialog box cancelButton.addEventListener('click', function() { favDialog.close(); }); })();
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<dialog>' in that specification. |
Living Standard | |
HTML 5.1 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.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 37 | No | No1 | No | 24 | No |
open | 37 | No | No1 | No | 24 | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 37 | 37 | No | No1 | No | No | No |
open | 37 | 37 | No | No1 | No | No | No |
1. See bug 840640.
Polyfills
Include this polyfill to provide support for older browsers.
See also
- The
close
event - The
cancel
event - HTML forms guide.
Document Tags and Contributors
Tags:
Contributors to this page:
Sheppy,
teoli,
Sebastianz,
edwinmdn1,
Noyabronok,
Chealer,
sideshowbarker,
torbasow,
cvrebert,
LPGhatguy,
ght,
jsx,
dhodder,
Akilan_Arasu
Last updated by:
Sheppy,