HTMLDialogElement: close() method

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.

The close event is fired after the dialog has closed. Unlike when calling requestClose(), the close operation cannot be cancelled.

Syntax

close()
close(returnValue)

Parameters

• returnValue Optional
  • : A string that replaces the existing value of returnValue.

Return value

None (undefined).

Examples

Closing a 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="log"></pre>

#log {
  height: 170px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.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 = "";
  // Show 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(`Closed at ${new Date().toLocaleTimeString()}`);
});

// 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.

Result

Specifications

Browser compatibility

See also

• HTML <dialog> element
• The close event
• requestClose()