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.

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

Syntax

js
close()
close(returnValue)

Parameters

returnValue Optional

A string that replaces the existing value of HTMLDialogElement.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

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>

#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;
}

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Jan 26, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLDialogElement: close() method

In this article

Syntax

Parameters

Return value

Examples

Closing a dialog

HTML

JavaScript

Result

Specifications

Browser compatibility

See also

Help improve MDN