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 März 2022.
Die showModal()-Methode des HTMLDialogElement-Interfaces zeigt das Dialogfeld als modales Dialogfeld an, das alle anderen sichtbaren Dialoge oder Elemente überlagert.
Ein modales Dialogfeld wird in der obersten Ebene zusammen mit einem ::backdrop Pseudo-Element angezeigt. Elemente im selben Dokument wie das Dialogfeld, mit Ausnahme des Dialogfelds und seiner Nachkommen, werden inert (als ob das inert-Attribut angegeben ist). Nur das umgebende Dokument wird blockiert; wenn das Dialogfeld in einem iframe gerendert wird, bleibt der Rest der Seite interaktiv.
Syntax
showModal()
Parameter
Keine.
Rückgabewert
Keine (undefined).
Ausnahmen
InvalidStateErrorDOMException-
Wird ausgelöst, wenn das Dialogfeld bereits geöffnet und nicht-modal ist (d.h. wenn das Dialogfeld bereits mit
HTMLDialogElement.show()geöffnet wurde).
Beispiele
Grundlegende Verwendung
Das folgende Beispiel zeigt einen einfachen Button, der bei einem Klick ein <dialog> mit der showModal()-Methode öffnet.
Wenn das Dialogfeld geöffnet ist, können Sie nicht mit dem Rest der Seite interagieren, einschließlich des Klickens auf den Button Click me, der andernfalls einen Alarm auslösen würde.
Sie können auf den Button Close dialog klicken, um das Dialogfeld zu schließen (über die HTMLDialogElement.close()-Methode).
HTML
<dialog id="dialog">
<button type="button" id="close">Close dialog</button>
</dialog>
<p><button id="open">Open dialog</button></p>
<p><button id="alert">Trigger alert</button></p>
JavaScript
const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const closeButton = document.getElementById("close");
const alertButton = document.getElementById("alert");
// Open button opens a modal dialog
openButton.addEventListener("click", () => {
dialog.showModal();
});
// Alert button triggers an alert
alertButton.addEventListener("click", () => {
alert("you clicked me!");
});
// Close button closes the dialog box
closeButton.addEventListener("click", () => {
dialog.close();
});
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-dialog-showmodal-dev |
Browser-Kompatibilität
Siehe auch
- HTML
<dialog>-Element HTMLDialogElement.show()