Showing a Modal Dialog

Dialogs are shown using the HTMLDialogElement#showModal method. This method will render the dialog. The method will return a Promise, which you can use to easily wait for the dialog to be dismissed.

dialog.showModal().then((result) => {
  // handle dialog result
  // if canceled by ESC, will be "reasonCanceled"
});
CopyCopied to your clipboard
1dialog.showModal().then((result) => {
2  // handle dialog result
3  // if canceled by ESC, will be "reasonCanceled"
4});

Info

The dialog element must be present in the DOM before showing it. If it isn't, the method will throw an exception.

It's important to note that you can only show one dialog at once. You should always close or dismiss a dialog first and then wait for the dialog's promise to resolve before showing another one.

Last updated 8/10/2021

Was this helpful?

Yes

No