Dialogelement – einfache Dialoge

Eiji Kitamura
Eiji Kitamura

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

  • show(): Dialogfeld öffnen.
  • close(): Dialogfeld schließen. Verwendet ein optionales Argument, auf das, sofern vorhanden, dialog.returnValue festgelegt ist.
  • showModal(): Modales Dialogfeld öffnen.
  • ::backdrop: Pseudoelement zum Gestalten des Hintergrunds hinter einem modalen Dialogfeld.
  • Ereignis close: Wird beim Schließen eines Dialogfelds ausgelöst.

Aktualisiert am 16. Dezember 2013

Das dialog-Element unterstützt jetzt:

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

Sieh dir die Details mit einer Live-Demo und Polyfill an.

Du kannst sie aktivieren, indem du unter chrome://flags/ die Option „Experimentelle Webplattformfunktionen aktivieren“ aktivierst.