HTMLDialogElement: close event

The close event is fired on an HTMLDialogElement object when the dialog it represents has been closed.

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>

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

Browser compatibility

See also

• HTML <dialog> element