Styling von Modals und Dialogen

Das HTML-Element <dialog> bietet integrierte Modal-Funktionalität: Fokusfalle, Schließen mit der Escape-Taste sowie die API showModal() / close(). Gestalten Sie es mit CSS, anstatt eine eigene Modal-Grundstruktur von Grund auf zu erstellen.

Mit dem Pseudo-Element ::backdrop gestalten Sie das Overlay hinter einem geöffneten <dialog>. Wenden Sie einen halbtransparenten Hintergrund an: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Ein umschließendes div ist nicht erforderlich.

Zentrieren Sie Dialoge mit CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. Mit margin: auto auf einem Dialog wird dieser ohne eine Positionierung per JS in der Mitte des Viewports platziert.

Setzen Sie overflow-y: auto direkt am Dialog, um lange Inhalte zu verarbeiten. Setzen Sie beim Öffnen des Modals overflow: hidden auf body, um das Scrollen im Hintergrund zu verhindern – fügen Sie mit JavaScript eine Klasse hinzu und entfernen Sie sie wieder, um dies umzuschalten.

Animieren Sie das Öffnen eines Dialogs mit @starting-style (Chrome 117+), um CSS-only-Eintrittsanimationen ohne JavaScript zu ermöglichen. Für eine breitere Unterstützung fügen Sie mit JavaScript eine open-Klasse hinzu und verwenden Sie transition für transform und opacity: slide-up von translateY(20px) zu translateY(0).

Das Animieren des Schließens eines Dialogs ist schwierig – der Dialog wird bei close() sofort ausgeblendet. Mögliche Lösungen: Verwenden Sie die Popover API, die Schließanimationen nativ unterstützt, oder fangen Sie das Schließen mit JavaScript ab, spielen Sie die Exit-Animationsklasse ab und rufen Sie close() erst auf, wenn die Animation beendet ist.

Geöffnete Dialoge werden über allen anderen Inhalten der Seite angezeigt. Vermeiden Sie z-index-Konflikte, indem Sie den nativen Stacking Context des dialog-Elements verwenden – es wird in der Top Layer über allen CSS-z-index-Werten dargestellt, ohne dass Sie selbst einen z-index für den Dialog festlegen müssen.

Schieben Sie Dialoge auf Mobilgeräten als Sheet von unten herein: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. Zentrieren Sie sie auf Desktopgeräten als herkömmliches Modal nach dem Muster margin: auto.

Das native dialog-Element verschiebt den Fokus beim Öffnen automatisch auf das erste fokussierbare Element im Dialog. Sorgen Sie innerhalb des Dialogs für eine logische Tab-Reihenfolge. Fügen Sie eine Schaltfläche zum Schließen hinzu, die den Fokus beim Schließen des Dialogs zum auslösenden Element zurückführt, damit die Tastaturnavigation korrekt fortgesetzt werden kann.

Fügen Sie aria-labelledby mit einem Verweis auf den Dialogtitel und aria-describedby mit einem Verweis auf die Dialogbeschreibung hinzu. Die Rolle des Dialogs ist für <dialog> implizit festgelegt. Screenreader geben diese Bezeichnungen aus, sobald der Fokus in den Dialog gelangt.

Bestätigungsdialoge benötigen: einen eindeutigen Fragentitel, eine kurze Beschreibung der Auswirkungen, eine Schaltfläche für die destruktive Aktion (rot, rechtsbündig) und eine Abbrechen-Schaltfläche (linksbündig oder sekundär). Verwenden Sie autofocus für die Abbrechen-Schaltfläche, damit die sichere Auswahl die standardmäßige Tastaturaktion ist.

Welchen Vorteil bietet das native Element <dialog> gegenüber einem benutzerdefinierten Modal auf Basis eines div?

Das native dialog-Element mit ::backdrop, Zentrierung durch margin: auto, Überlaufsteuerung, CSS-Animationen für das Öffnen und Fokusverwaltung bietet ein vollständig barrierefreies, CSS-gesteuertes Modal-Muster. Responsive Sheet-Layouts auf Mobilgeräten und korrekte ARIA-Attribute vervollständigen eine produktionsreife Dialogkomponente.