HTMLDialogElement: show() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨März 2022⁩.

Dieshow() Methode derHTMLDialogElement Schnittstelle zeigt das Dialogfeld modelless an, d.h. sie ermöglicht weiterhin die Interaktion mit Inhalten außerhalb des Dialogs.

Syntax

show()

Ausnahmen

InvalidStateErrorDOMException: Wird ausgelöst, wenn das Dialogfeld bereits geöffnet und modal ist (d.h. wenn das Dialogfeld bereits mitHTMLDialogElement.showModal() geöffnet wurde).

Das folgende Beispiel zeigt einen einfachen Button, der beim Klicken ein<dialog> mit einem Formular über dieshow() Methode öffnet.Von dort aus können Sie auf dieAbbrechen-Schaltfläche ("X") klicken, um den Dialog zu schließen (über dieHTMLDialogElement.close() Methode), oder das Formular über die Absenden-Schaltfläche einreichen.

HTML

html

<!-- Simple pop-up dialog box, containing a form --><dialog>  <form method="dialog">    <button type="button">X</button>    <section>      <p>        <label for="favAnimal">Favorite animal:</label>        <select name="favAnimal">          <option></option>          <option>Brine shrimp</option>          <option>Red panda</option>          <option>Spider monkey</option>        </select>      </p>    </section>    <menu>      <li>        <button type="reset">Reset</button>      </li>      <li>        <button type="submit">Confirm</button>      </li>    </menu>  </form></dialog><button>Update details</button>

JavaScript

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 cancelled");  }}// Update button opens a modeless dialogupdateButton.addEventListener("click", () => {  dialog.show();  openCheck(dialog);});// Form cancel button closes the dialog boxcancelButton.addEventListener("click", () => {  dialog.close("animalNotChosen");  openCheck(dialog);});