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 der HTMLDialogElement-Schnittstelle zeigt den Dialog als Modal an, über allen anderen möglicherweise vorhandenen Dialogen. Es wird in der Top-Schicht dargestellt, zusammen mit einem ::backdrop Pseudo-Element. Die Interaktion außerhalb des Dialogs wird blockiert und der Inhalt außerhalb wird inaktiv gemacht.

Syntax

js
showModal()

Parameter

Keine.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException

Wird geworfen, wenn der Dialog bereits geöffnet ist (d. h. wenn das open-Attribut bereits auf dem <dialog>-Element gesetzt ist), oder wenn der Dialog auch ein Popover ist, das bereits angezeigt wird.

Beispiele

Öffnen eines modalen Dialogs

Das folgende Beispiel zeigt einen Button, der beim Klicken ein modales <dialog> mit einem Formular über die HTMLDialogElement.showModal()-Funktion öffnet. Solange es geöffnet ist, ist alles außer dem Inhalt des modalen Dialogs inaktiv. Von dort aus können Sie auf den Abbrechen-Button klicken, um den Dialog zu schließen (über die HTMLDialogElement.close()-Funktion), oder das Formular über den Absenden-Button einreichen. Die Auswahl des Abbrechen-Buttons schließt den Dialog, wodurch ein close-Ereignis entsteht, 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 Standard
# dom-dialog-showmodal-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • Das HTML-Element, das diese Schnittstelle implementiert: <dialog>.