HTMLDialogElement: close()-Methode

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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 zum Aufruf von HTMLDialogElement.requestClose() kann die Schließ-Operation nicht abgebrochen werden.

Syntax

close()
close(returnValue)

Parameter

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

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

Der Close-Button schließt den Dialog ohne einen returnValue, während der Button Close w/ return value 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:

Wussten Sie, dass Sie einen <dialog> auch automatisch schließen können, indem Sie ein <form>-Element mit einem method="dialog"-Attribut abschicken?