Search code examples
javascripthtmldialogmodal-dialoghtml-5.2

Dialog element 'open' event

For the dialog element <dialog>, is there some sort of "open" event that is fired when it is shown, either normally or as a modal?

The spec isn't totally clear on this, and MDN just lists a bunch of inherited events.

The close event does fire, but I can't seem to get any sort of open event.

Example HTML:

<dialog>
  <h1>Oh hey, a dialog...</h1>
</dialog>

And in JavaScript:

document.querySelector('dialog').addEventListener('open', (e) => {
  console.log(e);
});
document.querySelector('dialog').showModal();
Solution

  • No, there is no open event.

    The dialog has an open property which can determine if it's opened or not, but unfortunately there's no event when this transitions.