HTMLDialogElement.close()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The close()
method of the HTMLDialogElement
interface closes the dialog. An optional DOMString
may be passed as an argument, updating the returnValue
of the dialog.
Syntax
dialogInstance.close(returnValue);
Parameters
- returnValue Optional
-
A
DOMString
representing an updated value for theHTMLDialogElement.returnValue
of the dialog.
Return value
Void.
Examples
The following example shows a simple button that, when clicked, opens a <dialog>
containing a form via the showModal()
method. From there you can click the Cancel button to close the dialog (via the HTMLDialogElement.close()
method), or submit the form via the submit button.
<!-- 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'); var dialog = document.getElementById('favDialog'); dialog.returnValue = 'favAnimal'; function openCheck(dialog) { if(dialog.open) { console.log('Dialog open'); } else { console.log('Dialog closed'); } } // Update button opens a modal dialog updateButton.addEventListener('click', function() { dialog.showModal(); openCheck(dialog); }); // Form cancel button closes the dialog box cancelButton.addEventListener('click', function() { dialog.close('animalNotChosen'); openCheck(dialog); }); })(); </script>
Note: You can find this example on GitHub as htmldialogelement-basic (see it live also).
Specifications
Specification |
---|
HTML Standard (HTML) # dom-dialog-close-dev |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
close |
37 |
79 |
53
See bug 840640.
|
No |
24 |
No |
37 |
37 |
53
See bug 840640.
|
24 |
No |
3.0 |
See also
- The HTML element implementing this interface:
<dialog>
.
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close