Modal Dialog
Boîte de dialogue modale
Une boîte de dialogue modale est une fenêtre ciblée. Elle bloque l'écran actuel jusqu'à ce que quelqu'un la ferme ou la termine.
Un vrai exemple
Pour la suppression de compte, le focus du clavier reste à l'intérieur de la boîte de dialogue. Si la personne annule, le focus revient sur le bouton qui l'a ouverte.
Parties principales
- 01Déclencheur
- 02Anchored or modal surface
- 03Focus boundary
- 04Dismiss path
Utilisez-le lorsque
Utilisez-le pour un choix court ou une petite tâche qui doit recevoir toute l'attention.
Ne l'utilisez pas lorsque
N'ouvrez jamais une boîte de dialogue par-dessus une autre et n'utilisez pas une boîte de dialogue pour des informations normales ou à faible risque.
Nom utilisé dans le code
<dialog> / role="dialog" aria-modal="true" Avant d'expédier
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 Boîte de dialogue modale (Modal Dialog). User context: Pour la suppression de compte, le focus du clavier reste à l'intérieur de la boîte de dialogue. Si la personne annule, le focus revient sur le bouton qui l'a ouverte. Recommended pattern: Boîte de dialogue modale (Modal Dialog). Why it fits: Utilisez-le pour un choix court ou une petite tâche qui doit recevoir toute l'attention. Do not use it when: N'ouvrez jamais une boîte de dialogue par-dessus une autre et n'utilisez pas une boîte de dialogue pour des informations normales ou à faible risque. 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): La norme couvre uniquement le champ d'application énuméré. Elle ne choisit ni le style visuel, ni la décision de produit, ni l'exemple de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Boîte de dialogue modale (Modal Dialog) is used now. Definition: Une boîte de dialogue modale est une fenêtre ciblée. Elle bloque l'écran actuel jusqu'à ce que quelqu'un la ferme ou la termine. 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.