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 Standard The 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.
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