HTMLDialogElement: showModal() 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 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.

Sie können auf den Button Close dialog klicken, um das Dialogfeld zu schließen (über die HTMLDialogElement.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 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();
});

HTML <dialog>-Element
HTMLDialogElement.show()

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

HTMLDialogElement: showModal() Methode

In diesem Artikel

Syntax

Parameter

Rückgabewert

Ausnahmen

Beispiele

Grundlegende Verwendung

HTML

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN