HTMLDialogElement: close() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2022⁩.

The close() method of the HTMLDialogElement interface closes the <dialog>. An optional string may be passed as an argument, updating the returnValue of the dialog.

Syntax

close()
close(returnValue)

Parameters

returnValue Optional: A string representing an updated value for the HTMLDialogElement.returnValue of the dialog.

The following example shows a button that, when clicked, opens a <dialog> via the showModal() method. From there you can click the either Close button to close the dialog (via the close() method).

The Close button closes the dialog without a returnValue, while the Close w/ return value button closes the dialog with a returnValue.

html

<dialog id="dialog">
  <button type="button" id="close">Close</button>
  <button type="button" id="close-w-value">Close w/ return value</button>
</dialog>

<button id="open">Open dialog</button>

<pre id="status-text"></pre>

#status-text {
  height: 120px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const statusText = document.getElementById("status-text");
function log(text) {
  statusText.innerText = `${statusText.innerText}${text}\n`;
  statusText.scrollTop = statusText.scrollHeight;
}

const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const closeButton = document.getElementById("close");
const closeWithValueButton = document.getElementById("close-w-value");

// Update button opens a modal dialog
openButton.addEventListener("click", () => {
  // Reset the return value
  dialog.returnValue = "";
  // Rhow the dialog
  dialog.showModal();
});

// Close button closes the dialog box
closeButton.addEventListener("click", () => {
  dialog.close();
});

// Close button closes the dialog box with a return value
closeWithValueButton.addEventListener("click", () => {
  dialog.close("some value");
});

// Form close button closes the dialog box
dialog.addEventListener("close", () => {
  log(`Dialog closed. Return value: "${dialog.returnValue}"`);
});

Note:

You know you can also automatically close a <dialog> by submitting a <form> element with a method="dialog" attribute.