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

Bouillonnant Non
Annulable Non
Interface Event
Propriété du gestionnaire d'événements onclose

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

Spécification État
HTML Living Standard
La définition de 'close' dans cette spécification.
Standard évolutif

Compatibilité des navigateurs

BCD tables only load in the browser

Voir également