Ein Modal Dialog (auch: Modales Fenster, Dialogfenster) ist ein UI-Element, das als Overlay ueber dem Hauptinhalt erscheint und die Interaktion mit dem darunter liegenden Interface blockiert. Der Nutzer muss das Modal schliessen oder eine Aktion darin ausfuehren, bevor er fortfahren kann.
Modals sind eines der mächtigsten — und zugleich am haeufigsten missbrauchten — Elemente im UI-Design. Richtig eingesetzt fokussieren sie die Aufmerksamkeit auf eine kritische Aktion. Falsch eingesetzt unterbrechen sie den Arbeitsfluss und frustrieren Nutzer.
Wann Modals sinnvoll sind
Berechtigte Einsatzzwecke
| Einsatz | Beispiel | Begruendung |
|---|---|---|
| Destruktive Aktionen | "Moechten Sie dieses Projekt unwiderruflich loeschen?" | Verhindert versehentlichen Datenverlust |
| Fokussierte Eingabe | Login-Formular, Schnelleditor | Isoliert die Aufgabe vom Kontext |
| Kritische Meldungen | Sitzung laeuft ab, ungespeicherte Aenderungen | Erfordert sofortige Aufmerksamkeit |
| Medien-Vorschau | Bild-Lightbox, Video-Player | Immersive Darstellung |
| Rechtliche Zustimmung | Cookie-Consent, AGB-Akzeptanz | Muss vor Weiternutzung bestaetigt werden |
Wann Modals vermieden werden sollten
- Fuer reine Informationen, die keiner Aktion beduerfen — nutzen Sie Toast Notifications
- Fuer Inhalte, die im Seitenkontext bleiben sollten — nutzen Sie Inline-Expansion
- Fuer komplexe Formulare mit vielen Feldern — nutzen Sie eine eigene Seite
- Fuer wiederkehrende Hinweise — nutzen Sie Banner oder Tooltips
- Auf Seiten, die der Nutzer gerade erst betreten hat (Stichwort: Newsletter-Popup)
Anatomie eines Modals
Ein gut gestaltetes Modal besteht aus:
- Backdrop/Overlay: Abgedunkelter Hintergrund (typisch: rgba(0,0,0,0.5))
- Container: Das eigentliche Dialogfenster, zentriert oder positioniert
- Header: Titel des Dialogs, Schliessen-Button (X)
- Body: Inhalt, Formular oder Nachricht
- Footer: Aktionsbuttons (Bestaetigen, Abbrechen)
Groessenrichtlinien
| Geraet | Empfohlene Breite | Max. Hoehe |
|---|---|---|
| Desktop | 400-600px (klein), 600-800px (mittel) | 80vh |
| Tablet | 80-90% der Bildschirmbreite | 80vh |
| Mobile | 100% (Full-Screen oder Bottom-Sheet) | 100vh |
UX-Regeln fuer Modals
Schliessbarkeit
Ein Modal muss auf mindestens drei Arten schliessbar sein:
- X-Button in der oberen rechten Ecke
- Klick auf den Backdrop (bei nicht-kritischen Modals)
- Escape-Taste (Tastatur)
Bei kritischen Aktionen (z. B. "Wirklich loeschen?") kann der Backdrop-Klick deaktiviert werden, um versehentliches Schliessen zu verhindern.
Fokus-Management
Wenn ein Modal oeffnet, muss der Tastaturfokus ins Modal wandern — typischerweise auf das erste interaktive Element oder den Titel. Beim Schliessen kehrt der Fokus zum ausloesenden Element zurueck. Dies ist ein kritischer Aspekt der Barrierefreiheit.
Focus Trap
Innerhalb eines geoeffneten Modals sollte der Tab-Fokus "gefangen" sein — er darf nicht zum darunterliegenden Inhalt springen. Am Ende des Modals springt Tab zurueck zum Anfang des Modals.
Scroll-Verhalten
- Der Hintergrund-Scroll muss blockiert werden (scroll lock)
- Der Modal-Inhalt scrollt intern, wenn er laenger als der Viewport ist
- Die Scrollbar des Hintergrunds sollte nicht verschwinden (Layout-Shift vermeiden)
Accessibility
Barrierefreie Modals erfordern sorgfaeltige Implementierung gemaess WCAG und ARIA-Richtlinien:
role="dialog"auf dem Modal-Containeraria-modal="true"um den modalen Charakter zu signalisierenaria-labelledbyverweist auf den Dialog-Titelaria-describedbyverweist auf den Inhalt (optional)- Hintergrund-Inhalte mit
aria-hidden="true"oderinert-Attribut verbergen - Focus Trap implementieren
- Escape-Taste zum Schliessen
Native HTML-Loesung
Das HTML-Element <dialog> bietet viele Accessibility-Features nativ. In modernen Browsern ist <dialog> die empfohlene Grundlage fuer Modal-Implementierungen und reduziert den Bedarf an Custom-ARIA erheblich.
Modals in der Webentwicklung
Implementierung in React/Next.js
In React- und Next.js-Projekten werden Modals oft als Portal gerendert (createPortal), um sie ausserhalb der normalen DOM-Hierarchie zu platzieren. Komponentenbibliotheken wie Radix UI, Headless UI oder shadcn/ui bieten barrierefreie Modal-Komponenten mit integriertem Focus-Management.
Animation
Motion Design fuer Modals:
- Oeffnen: Fade-in des Backdrops (200ms) + Scale-up oder Slide-up des Containers (250-300ms)
- Schliessen: Umgekehrte Animation, etwas schneller (200ms)
- prefers-reduced-motion: Bei reduzierter Bewegung nur Fade statt Scale/Slide
Mobile Varianten
Auf mobilen Geraeten funktionieren zentrierte Modals oft schlecht. Alternativen:
- Bottom Sheet: Modal gleitet von unten hoch, natuerliche Touch-Geste zum Schliessen
- Full-Screen Modal: Nimmt den ganzen Bildschirm ein, mit deutlicher Zurueck-Navigation
- Action Sheet: Kompakte Optionsliste am unteren Bildschirmrand
Die Wahl zwischen Modal, Bottom Sheet und Toast Notification haengt vom Kontext, der Kritikalitaet der Aktion und dem Geraetetyp ab — eine Entscheidung, die zum Kern des Interaction Designs gehoert.