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 # dom-dialog-close-dev |
Browser compatibility
BCD tables only load in the browser
See also
- The HTML element implementing this interface:
<dialog>
.