{{SeeCompatTable}}
The HTML <dialog>
element represents a dialog box or other interactive component, such as an inspector or window. <form>
elements can be integrated within a dialog by specifying them with the attribute method="dialog"
. When such a form is submitted, the dialog is closed with a returnValue
attribute set to the value
of the submit button used.
The {{cssxref('::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.
Content categories | Flow content, sectioning root |
---|---|
Permitted content | Flow content |
Tag omission | {{no_tag_omission}} |
Permitted parent elements | Any element that accepts flow content |
DOM interface | {{domxref("HTMLDialogElement")}} |
Attributes
This element includes the global attributes. The tabindex
attribute must not be used on the <dialog>
element.
- {{htmlattrdef("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.
Examples
Example 1
<dialog open> <p>Greetings, one and all!</p> </dialog>
Example 2
<!-- Simple pop-up dialog box, containing a form --> <dialog 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> <script> (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(); }); })(); </script>
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}} | {{Spec2('HTML5.1')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 37 | {{CompatNo}}[1] | {{CompatNo}} | 24 | {{CompatNo}} |
Anchor points | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 37 | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Anchor points | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[1] See {{bug("840640")}}.
See also
- The {{event("close")}} event
- The {{event("cancel")}} event
- HTML forms guide.
{{HTMLRef}}