{{ DomRef() }}
{{ SeeCompatTable() }}
The HTMLDialogElement
interface provides methods to manipulate {{HTMLElement("dialog")}} elements. It inherits properties and methods from the {{domxref("HTMLElement")}} interface.
Properties
Inherits properties from its parent, {{domxref("HTMLElement")}}.
Name | Type | Description |
---|---|---|
open |
{{domxref("Boolean")}} | Reflects the {{ htmlattrxref("open", "dialog") }} HTML attribute, indicating that the dialog is available for interaction. |
returnValue |
{{domxref("DOMString")}} | Gets/sets the return value for the dialog. |
Methods
Inherits methods from its parent, {{domxref("HTMLElement")}}.
Name & Arguments | Return | Description |
---|---|---|
close() {{ HTMLVersionInline(5) }} |
void |
Closes the dialog. An optional {{domxref("DOMString")}} may be passed as an argument, updating the returnValue of the the dialog. |
show() {{ HTMLVersionInline(5) }} |
void |
Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog. An optional {{domxref("Element")}} or {{domxref("MouseEvent")}} may be passed as an argument, to specify an anchor point to which the dialog is fixed. |
showModal() {{ HTMLVersionInline(5) }} |
void |
Displays the dialog for exclusive interaction, over the top of any other dialogs that might be present. An optional {{domxref("Element")}} or {{domxref("MouseEvent")}} may be passed as an argument, to specify an anchor point to which the dialog is fixed. |
Examples
Example 1
<!-- Anchor point example --> <dialog id="bronteDialog"> <p>That was part of a poem by Emily Brontë!</p> </dialog> <blockquote> <p>"Then art thou glad to seek repose?<br> Art glad to leave the sea,<br> And <strong id="anchor">anchor</strong> all thy weary woes<br> In calm Eternity?"</p> </blockquote> <menu> <button id="showDialogButton">Show dialog</button> </menu> <script> (function() { var showDialogButton = document.getElementById('showDialogButton'); // 'Show dialog' button opens dialog, anchored at third line of quote showDialogButton.addEventListener('click', function() { var bronteDialog = document.getElementById('bronteDialog'); var anchorPoint = document.getElementById('anchor'); bronteDialog.show(anchorPoint); }); })(); </script>
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" name="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'); // Update button opens a modal dialog updateButton.addEventListener('click', function() { document.getElementById('favDialog').showModal(); }); // Form cancel button closes the dialog box cancelButton.addEventListener('click', function() { document.getElementById('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')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 37 | {{CompatNo()}} {{bug(840640)}} | {{CompatNo()}} | 24 | {{CompatNo()}} |
Anchor points | {{CompatNo()}} | {{CompatNo()}} | {{CompatNo()}} | {{CompatNo()}} | {{CompatNo()}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatNo()}} | {{CompatNo()}} | {{CompatNo()}} | {{CompatNo()}} | {{CompatNo()}} |
Anchor points | {{CompatNo()}} | {{CompatNo()}} | {{CompatNo()}} | {{CompatNo()}} | {{CompatNo()}} |
See also
- The HTML element implementing this interface: {{ HTMLElement("dialog") }}.