The close()
method of the HTMLDialogElement
interface closes the dialog. An optional string may be passed as an argument, updating the returnValue
of the dialog.
close()
close(returnValue)
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.
<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');
}
}
updateButton.addEventListener('click', function() {
dialog.showModal();
openCheck(dialog);
});
cancelButton.addEventListener('click', function() {
dialog.close('animalNotChosen');
openCheck(dialog);
});
})();
</script>