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.

In diesem Artikel

Syntax

show()

Parameter

Keine.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException

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

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

js
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();
});

HTML <dialog> Element
HTMLDialogElement.showModal()

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLDialogElement
Instanzeigenschaften
Instanzmethoden
Events
1. cancel
2. close
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung