Dialog modal HTML

Fokus rein. Fokus bleibt. Fokus zurück.

Ein modales Fenster bauen Sie mit <dialog> und öffnen es mit showModal(). Der Browser sperrt die restliche Seite, hält Tab im Dialog, schließt per Escape und führt den Fokus zum Auslöser zurück.

Native Fokusbahn

Ein Modal ist ein Fokus-Kreislauf.

dialog.showModal()
  1. 01Auslöser
  2. 02Hinein
  3. 03Tab bleibt
  4. 04Zurück

Dialog öffnen und die Fokusbahn testen.

Modaler Dialog

Bericht löschen?

Diese Demo löscht keine Daten.

Tab bleibt hier · Escape schließt

Entscheidend: Das open-Attribut macht den Dialog nur sichtbar. Erst showModal() macht ihn modal.