HTMLDialogElement: showModal() Methode
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.
Die showModal()
-Methode des
HTMLDialogElement
-Interfaces zeigt den Dialog als Modal an, überlagert alle anderen möglicherweise vorhandenen Dialoge. Er wird in der obersten Ebene angezeigt, zusammen mit einem ::backdrop
-Pseudo-Element. Elemente, die sich im selben Dokument wie der Dialog befinden, mit Ausnahme des Dialogs und seiner Nachkommen, werden unwirksam (als ob das inert
-Attribut angegeben wäre). Nur das umgebende Dokument wird blockiert; wenn der Dialog innerhalb eines iframe
angezeigt wird, bleibt der Rest der Seite interaktiv.
Syntax
showModal()
Parameter
Keine.
Rückgabewert
Keiner (undefined
).
Ausnahmen
InvalidStateError
DOMException
-
Wird ausgelöst, wenn der Dialog bereits geöffnet und nicht modal ist (d. h. wenn der Dialog bereits mit
HTMLDialogElement.show()
geöffnet wurde).
Beispiele
Öffnen eines modalen Dialogs
Das folgende Beispiel zeigt eine Schaltfläche, die beim Anklicken einen modalen <dialog>
mit einem Formular über die Funktion HTMLDialogElement.showModal()
öffnet. Während der Dialog geöffnet ist, wird alles außer dem Inhalt des modalen Dialogs unwirksam. Von dort aus können Sie entweder auf die Abbrechen-Schaltfläche klicken, um den Dialog zu schließen (über die Funktion HTMLDialogElement.close()
), oder das Formular über die Absenden-Schaltfläche einreichen. Das Auswählen der Abbrechen-Schaltfläche schließt den Dialog und löst ein close
-Ereignis aus, jedoch kein cancel
-Ereignis.
HTML
<!-- pop-up dialog box, containing a form -->
<dialog id="favDialog">
<form method="dialog">
<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>
<div>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</div>
</form>
</dialog>
<div>
<button id="updateDetails">Update details</button>
</div>
JavaScript
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
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 cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
dialog.close("animalNotChosen");
openCheck(dialog);
});
Ergebnis
Spezifikationen
Specification |
---|
HTML # dom-dialog-showmodal-dev |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
showModal |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Das HTML-Element, das dieses Interface implementiert:
<dialog>
.