Dialog Dismissal

Dialogs can be dismissed in the following ways:

• Manually, by the user pressing the ESC key
• Programmatically, by calling HTMLDialogElement#close with an optional return value.

You can listen for the default gesture (typically [ENTER]) by registering for the submit event on the form:

Copy
function onsubmit(e) {
  dialog.close("ok");
  e.preventDefault();
}
form.onsubmit = onsubmit;
Copied to your clipboard
function onsubmit(e) {
  dialog.close("ok");
  e.preventDefault();
}
form.onsubmit = onsubmit;

You should also register a click handler for your "OK" and "Cancel" buttons:

Copy
const cancelButton = document.querySelector("#cancel");
cancelButton.addEventListener("click", () => dialog.close("reasonCanceled"));

const okButton = document.querySelector("#ok");
okButton.addEventListener("click", (e) => {
  onsubmit();
  e.preventDefault();
});
Copied to your clipboard
const cancelButton = document.querySelector("#cancel");
cancelButton.addEventListener("click", () => dialog.close("reasonCanceled"));

const okButton = document.querySelector("#ok");
okButton.addEventListener("click", (e) => {
  onsubmit();
  e.preventDefault();
});

You can listen for the dialog's dismissal using the close event on the dialog:

Copy
dialog.addEventListener("close", () => {
  // dialog is closed at this point
});
Copied to your clipboard
dialog.addEventListener("close", () => {
  // dialog is closed at this point
});

Preventing Dialog Dismissal

You can, in some cases, prevent a dialog dismissal. If the form calls preventDefault on the submit event, the dialog will fail to dismiss.

Tip

It is not possible to cancel a dismissal triggered by the ESC gesture.

Last updated 8/10/2021

Was this helpful?

Yes

No