<dialog>

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

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.

Content categories Flow content, sectioning root
Permitted content Flow content
Tag omission Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich.
Permitted parent elements Jedes Element, das flow content akzeptiert
DOM interface HTMLDialogElement

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

Spezifikation Status Kommentar
WHATWG HTML Living Standard
Die Definition von '<dialog>' in dieser Spezifikation.
Lebender Standard  
HTML5.1
Die Definition von '<dialog>' in dieser Spezifikation.
Arbeitsentwurf  

Browser Kompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 37 Nicht unterstützt Bug 840640 Nicht unterstützt 24 Nicht unterstützt
Anchor points Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Android Browser 37 Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt
Anchor points Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt

Siehe Auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, kiloalphaindia
 Zuletzt aktualisiert von: Sebastianz,