HTMLDialogElement.open
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The open
property of the
HTMLDialogElement
interface is a boolean value reflecting the
open
HTML attribute, indicating whether the dialog is
available for interaction.
Value
A boolean value representing the state of the open
HTML attribute. true
means it is set, and therefore the dialog
is shown. false
means it not set, and therefore the dialog is not shown.
The property is now read only — it is possible to set the value to programmatically show or hide the dialog.
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-open |
Browser compatibility
BCD tables only load in the browser
See also
- The HTML element implementing this interface:
<dialog>
.