<dialog>

Zusammenfassung

Das HTML <dialog> element stellte einen Dialog oder eine andere interaktive Komponente, so wie ein Fenster oder Unterfenster, da. <form> Elemente können in einen Dialog Integriert werden in dem sie mit dem Attribut method="dialog" angegeben werden. Wenn eine solches Formular übertragen (submit) wird, wird der Dialog mit dem Rückgabewert (returnValue ) des value Attributes  am benutzten Submit Button geschlossen.

Das ::backdrop CSS pseudo-element kann benutzt werden um Elemente hinter dem <dialog> Element zu verändern; So kann beispielsweise der Hintergrund abgedunkelt werden.

Attribute

An diesem Element können die Globalen Attribute verwendet werden. Das tabindex Attribut darf am <dialog> Element nicht benutzt werden.

open

Der Dialog ist nach dem Laden des Dokumentes bereits geöffnet und aktiv. Ist das Attribut nicht gesetzt, so wird der Dialog nicht angezeigt.

Beispiele

Beispiel 1

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

Beispiel 2

<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <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>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

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

<script>
  (function() {
    var updateButton = document.getElementById('updateDetails');
    var cancelButton = document.getElementById('cancel');
    var favDialog = document.getElementById('favDialog');

    // Update button opens a modal dialog
    updateButton.addEventListener('click', function() {
      favDialog.showModal();
    });

    // Form cancel button closes the dialog box
    cancelButton.addEventListener('click', function() {
      favDialog.close();
    });

  })();
</script>

Spezifikationen

Browser Kompatibilität

Siehe Auch

• HTML forms guide.