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 wird auf den Wert der verwendeten Schaltfläche zum Senden gesetzt.

Details mit Live-Demo und Polyfill ansehen

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