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 March 2022.

Die showModal()-Methode des HTMLDialogElement-Interfaces zeigt den Dialog als Modal an, überlagert alle anderen möglicherweise vorhandenen Dialoge. Er wird in der obersten Ebene angezeigt, zusammen mit einem ::backdrop-Pseudo-Element. Elemente, die sich im selben Dokument wie der Dialog befinden, mit Ausnahme des Dialogs und seiner Nachkommen, werden unwirksam (als ob das inert-Attribut angegeben wäre). Nur das umgebende Dokument wird blockiert; wenn der Dialog innerhalb eines iframe angezeigt wird, bleibt der Rest der Seite interaktiv.

Syntax

js
showModal()

Parameter

Keine.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn der Dialog bereits geöffnet und nicht modal ist (d. h. wenn der Dialog bereits mit HTMLDialogElement.show() geöffnet wurde).

Beispiele

Öffnen eines modalen Dialogs

Das folgende Beispiel zeigt eine Schaltfläche, die beim Anklicken einen modalen <dialog> mit einem Formular über die Funktion HTMLDialogElement.showModal() öffnet. Während der Dialog geöffnet ist, wird alles außer dem Inhalt des modalen Dialogs unwirksam. Von dort aus können Sie entweder auf die Abbrechen-Schaltfläche klicken, um den Dialog zu schließen (über die Funktion HTMLDialogElement.close()), oder das Formular über die Absenden-Schaltfläche einreichen. Das Auswählen der Abbrechen-Schaltfläche schließt den Dialog und löst ein close-Ereignis aus, jedoch kein cancel-Ereignis.

HTML

html
<!-- pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal" name="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select>
    </p>
    <div>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </div>
  </form>
</dialog>

<div>
  <button id="updateDetails">Update details</button>
</div>

JavaScript

js
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";

function openCheck(dialog) {
  if (dialog.open) {
    console.log("Dialog open");
  } else {
    console.log("Dialog closed");
  }
}

// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

// Form cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
  dialog.close("animalNotChosen");
  openCheck(dialog);
});

Ergebnis

Spezifikationen

Specification
HTML
# dom-dialog-showmodal-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • Das HTML-Element, das dieses Interface implementiert: <dialog>.