HTMLDialogElement: close() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2022.

Die close() Methode des HTMLDialogElement Interfaces schließt das <dialog>. Ein optionaler String kann als Argument übergeben werden, um den returnValue des Dialogs zu aktualisieren.

Das close Ereignis wird ausgelöst, nachdem der Dialog geschlossen wurde. Im Gegensatz zu einem Aufruf von HTMLDialogElement.requestClose() kann der Schließvorgang nicht abgebrochen werden.

Syntax

close()
close(returnValue)

Parameter

returnValue Optional: Ein String, der den bestehenden Wert von HTMLDialogElement.returnValue ersetzt.

Das folgende Beispiel zeigt einen Button, der beim Klicken ein <dialog> über die showModal() Methode öffnet. Von dort können Sie auf einen der Close Buttons klicken, um den Dialog zu schließen (über die close() Methode).

Der Close Button schließt den Dialog ohne returnValue, während der Close w/ return value Button den Dialog mit einem returnValue schließt.

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>

<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}"`);
});

Hinweis:

Wissen Sie, dass Sie einen <dialog> auch automatisch schließen können, indem Sie ein <form> Element mit einem method="dialog" Attribut übermitteln.