The close
event is fired on an HTMLDialogElement
object when the dialog it represents has been closed.
Bubbles | No |
Cancelable | No |
Interface | Event
|
Event handler property | onclose
|
Examples
Live example
HTML
<dialog class="example-dialog">
<button class="close" type="reset">Close</button>
</dialog>
<button class="open-dialog">Open dialog</button>
<div class="result"></div>
CSS
button, div {
margin: .5rem;
}
JS
const result = document.querySelector('.result');
const dialog = document.querySelector('.example-dialog');
dialog.addEventListener('close', (event) => {
result.textContent = 'dialog was closed';
});
const openDialog = document.querySelector('.open-dialog');
openDialog.addEventListener('click', () => {
if (typeof dialog.showModal === 'function') {
dialog.showModal();
result.textContent = '';
} else {
result.textContent = 'The dialog API is not supported by this browser';
}
});
const closeButton = document.querySelector('.close');
closeButton.addEventListener('click', () => {
dialog.close();
});
Result
Specifications
Specification | Status |
HTML Living StandardThe definition of 'close' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
close event
|
Chrome
Full support Yes |
Edge
Full support 79 |
Firefox
No support No |
IE
No support No |
Opera
? |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
See also
- HTML
<dialog>
element
HTMLDialogElement: close event by Mozilla Contributors is licensed under CC-BY-SA 2.5.