Modal Dialog
Modaldialog
Ein modaler Dialog ist ein Fenster, das im Mittelpunkt steht. Es blockiert den aktuellen Bildschirm, bis man es schließt oder fertig ist.
Ein echtes Beispiel
Bei der Kontolöschung bleibt der Tastaturfokus innerhalb des Dialogs. Wenn die Person abbricht, kehrt der Fokus zum Button zurück, der ihn geöffnet hat.
Hauptteile
- 01Auslösen
- 02Anchored or modal surface
- 03Focus boundary
- 04Dismiss path
Verwenden Sie es, wenn
Verwenden Sie es für eine kurze Auswahl oder kleine Aufgabe, die volle Aufmerksamkeit erfordert.
Nutze es nicht, wenn
Öffne niemals einen Dialog über einem anderen oder benutze einen für normale, risikoarme Informationen.
In Code verwendeter Name
<dialog> / role="dialog" aria-modal="true" Vor dem Ausliefern
Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states.
Outcome: Complete the task with Modaldialog (Modal Dialog). User context: Bei der Kontolöschung bleibt der Tastaturfokus innerhalb des Dialogs. Wenn die Person abbricht, kehrt der Fokus zum Button zurück, der ihn geöffnet hat. Recommended pattern: Modaldialog (Modal Dialog). Why it fits: Verwenden Sie es für eine kurze Auswahl oder kleine Aufgabe, die volle Aufmerksamkeit erfordert. Do not use it when: Öffne niemals einen Dialog über einem anderen oder benutze einen für normale, risikoarme Informationen. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Der Standard deckt nur den aufgeführten Umfang ab. Er wählt nicht den visuellen Stil, die Produktentscheidung oder das Vibulary-Beispiel aus. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Modaldialog (Modal Dialog) is used now. Definition: Ein modaler Dialog ist ein Fenster, das im Mittelpunkt steht. Es blockiert den aktuellen Bildschirm, bis man es schließt oder fertig ist. Release checks: Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.