HTMLDialogElement: close event
L'événement close
est déclenché sur un objet HTMLDialogElement
lorsque la boîte de dialogue qu'il représente a été fermée.
Exemples
Exemple concret
HTML
<dialog class="example-dialog">
<button class="close" type="reset">Close</button>
</dialog>
<button class="open-dialog">Open dialog</button>
<div class="result"></div>
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()
})
Résultat
Spécifications
Specification |
---|
HTML Standard # event-close |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Élément HTML
<dialog>