HTMLDialogElement: show() 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 show() Methode der HTMLDialogElement Schnittstelle zeigt das Dialogfeld als ein nicht-modales Dialogfeld an.
Ein nicht-modales Dialogfeld ist eines, bei dem Benutzer mit dem Inhalt außerhalb/hinter dem geöffneten Dialog interagieren können.
Syntax
show()
Parameter
Keine.
Rückgabewert
Keiner (undefined).
Ausnahmen
InvalidStateErrorDOMException-
Wird ausgelöst, wenn das Dialogfeld bereits geöffnet und modal ist (d.h. wenn das Dialogfeld bereits mit
HTMLDialogElement.showModal()geöffnet wurde).
Beispiele
Grundlegende Verwendung
Das folgende Beispiel zeigt einen einfachen Button, der, wenn er angeklickt wird, ein <dialog> mit der show() Methode öffnet.
Wenn das Dialogfeld geöffnet ist, können Sie weiterhin mit dem Rest der Seite interagieren, einschließlich des Klickens auf den Button Click me, der einen Alert auslöst.
Sie können auf den Button Close dialog klicken, um das Dialogfeld zu schließen (über die 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 modeless dialog
openButton.addEventListener("click", () => {
dialog.show();
});
// 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-show-dev |
Browser-Kompatibilität
Siehe auch
- HTML
<dialog>Element HTMLDialogElement.showModal()