Dialogelement – einfache Dialoge

Eiji Kitamura

In Chrome Canary wird das Dialogelement jetzt mit einem Flag unterstützt. Das dialog-Element kann für Pop-ups auf einer Webseite verwendet werden.

  • show(): Dialogfeld öffnen.
  • close(): Dialogfeld schließen. Nimmt ein optionales Argument entgegen, auf das dialog.returnValue gesetzt wird, falls es vorhanden ist.
  • showModal(): Modales Fenster öffnen.
  • ::backdrop: Pseudo-Element zum Stylen des Hintergrunds hinter einem modalen Dialogfeld.
  • close-Ereignis: Wird ausgelöst, wenn ein Dialogfeld geschlossen wird.

Update vom 16. Dezember 2013

Das dialog-Element unterstützt jetzt:

  • cancel-Ereignis: Wird ausgelöst, wenn in einem modalen Dialogfeld die Esc-Taste gedrückt wird. Dieser Termin kann mit event.preventDefault() abgesagt werden.
  • autofocus-Attribut: Das erste Formularkontrollelement in einem modalen Dialogfeld, das das autofocus-Attribut hat, wird beim Anzeigen des Dialogfelds fokussiert. Wenn kein solches Element vorhanden ist, wird der Fokus auf das erste fokussierbare Element gelegt.
  • form[method="dialog"]: Nur in einem Dialogfeld gültig. Nach dem Senden des Formulars wird das Dialogfeld geschlossen und dialog.returnValue auf den Wert der verwendeten Schaltfläche „Senden“ gesetzt.

Details mit Live-Demo und Polyfill ansehen

Aktivieren Sie sie unter chrome://flags/, indem Sie „Experimentelle Webplattformfunktionen aktivieren“ aktivieren.