HTMLDialogElement: show() 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.
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
| Spezifikation |
|---|
| HTML # dom-dialog-show-dev |
Browser-Kompatibilität
Siehe auch
- HTML
<dialog>Element HTMLDialogElement.showModal()