Baseline Widely available
Die close()
-Methode der HTMLDialogElement
-Schnittstelle schlieÃt das <dialog>
. Ein optionaler String kann als Argument übergeben werden, um den returnValue
des Dialogs zu aktualisieren.
close()
close(returnValue)
Parameter
returnValue
Optional
Ein String, der einen aktualisierten Wert für den HTMLDialogElement.returnValue
des Dialogs darstellt.
Keiner (undefined
).
Das folgende Beispiel zeigt einen einfachen Button, der beim Klicken ein <dialog>
mit einem Formular über die showModal()
-Methode öffnet. Von dort aus können Sie auf den X-Button klicken, um den Dialog zu schlieÃen (über die HTMLDialogElement.close()
-Methode), oder das Formular über den Absenden-Button einreichen.
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
<form method="dialog">
<button id="close" aria-label="close" formnovalidate>X</button>
<section>
<p>
<label for="favAnimal">Favorite animal:</label>
<select id="favAnimal" name="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select>
</p>
</section>
<menu>
<button type="reset">Reset</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
const updateButton = document.getElementById("updateDetails");
const closeButton = document.getElementById("close");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";
function openCheck(dialog) {
if (dialog.open) {
console.log("Dialog open");
} else {
console.log("Dialog closed");
}
}
// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
// Form close button closes the dialog box
closeButton.addEventListener("click", () => {
dialog.close("animalNotChosen");
openCheck(dialog);
});
Wenn der "X"-Button type="submit"
wäre, hätte sich der Dialog geschlossen, ohne dass JavaScript erforderlich wäre. Eine Formulareinreichung schlieÃt das <dialog>
, in dem es eingebettet ist, wenn die Methode des Formulars dialog
ist, sodass kein "SchlieÃen"-Button erforderlich ist.
<dialog>
.Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4