Modal dialog
Boîte de dialogue modale
Une surface ciblée pour une tâche délimitée qui rend le reste de la page temporairement inactif.
Avec vos mots
Ce que les gens décrivent
Alias documentés : modale, dialogue, fenêtre modale
- une fenêtre au-dessus de la page pour modifier des détails
- ouvrir un formulaire et bloquer l'arrière-plan
- une boîte centrée que je dois terminer ou fermer
- afficher des réglages sans quitter cette page
- une fenêtre qui garde le focus jusqu'à sa fermeture
- une superposition pour une courte tâche délimitée
Essayer
Surfaces modales
Comparer les trois comportements
Scénario comparatif partagé : Un élément de projet ouvre une surface ciblée tandis que l'espace sous-jacent reste indisponible jusqu'à ce que l'utilisateur termine ou ferme cette surface.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Boîte de dialogue modale
Utiliser une Boîte de dialogue modale pour une tâche générale délimitée ; choisir Alert dialog pour une décision courte et sensible, et Lightbox lorsque la consultation d'un média est la tâche.
Votre mission
Ouvrir le dialogue, parcourir tous les contrôles avec Tab, annuler avec Échap et vérifier le retour du focus sur Modifier le membre.
Cas limite à vérifier
Une erreur de validation garde le dialogue ouvert, relie le message au champ invalide et ne déplace le focus qu'après l'échec de l'envoi.
Mission
Fenêtre modale - Modal dialog
Ouvrir le dialogue, parcourir tous les contrôles avec Tab, annuler avec Échap et vérifier le retour du focus sur Modifier le membre.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Voile de fond
La couche qui sépare une surface modale du contenu de page inactif.
À utiliser quand
- Modifier une fiche compacte sans perdre le contexte
- Remplir un formulaire court et ciblé
À éviter quand
- Le parcours est assez long pour mériter sa propre page
- L'information peut rester non modale et contextuelle
Comparer les concepts proches
Un Dialogue d'alerte sert à une décision courte et sensible, pas à un formulaire général ni à une visionneuse de média.
Dialogue d'alerteLightbox est une composition modale dédiée aux médias ; une Boîte de dialogue modale traite les tâches et un Dialogue d'alerte traite une décision sensible.
Visionneuse modaleBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Contenir le focus
Tant que la surface est modale, le focus clavier y reste jusqu'à sa fermeture.
Fermer avec Échap
Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent.
États
Dialogue fermé
Dialogue fermé
Dialogue ouvert
Dialogue ouvert
Transitions d’état
Dialogue fermé → Dialogue ouvert
Le déclencheur de modification est activé et le focus entre dans la tâche délimitée.
Dialogue ouvert → Dialogue fermé
La tâche est enregistrée ou annulée, ou Échap la ferme sans risque, puis le focus revient au déclencheur.
Scénarios de test
- Contexte
- Une fiche de membre ouvre un court formulaire pour modifier le rôle et le nom affiché.
- Mission
- Ouvrir le dialogue, parcourir tous les contrôles avec Tab, annuler avec Échap et vérifier le retour du focus sur Modifier le membre.
- État principal
- Le formulaire s'ouvre avec son titre annoncé et le focus sur le premier champ utile.
- Cas limite
- Une erreur de validation garde le dialogue ouvert, relie le message au champ invalide et ne déplace le focus qu'après l'échec de l'envoi.
Accessibilité
- Role
- dialog with aria-modal=true
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- L'ouverture déplace le focus à l'intérieur, Tab n'atteint pas la page inerte et la fermeture restaure le focus sur le déclencheur logique.
- Fermeture
- Annuler, le contrôle de fermeture nommé et Échap ferment sans enregistrer ; l'appui extérieur n'est permis que si une perte accidentelle est sans conséquence.
- Scroll
- Le défilement de l'arrière-plan est verrouillé pendant l'ouverture. Le contenu débordant défile dans la surface et le contrôle actif reste visible.
- Annonce
- La technologie d'assistance reçoit le rôle dialogue, le titre accessible, la description et les mises à jour de validation.
- Clavier
- Tab et Maj+Tab circulent dans le dialogue
- Échap ferme lorsque l'annulation est sûre
- Entrée envoie seulement depuis le contrôle prévu
Bindings
Dialog.Root
- implementationKind
- radix
- nativeElement
- Non applicable
- ariaPattern
- dialog
- radixPrimitive
- Dialog
- shadcnRecipe
- Dialog
- runtimeDependency
- @radix-ui/react-dialog@1.1.19
- packageName
- @radix-ui/react-dialog
- exportName
- Dialog.Root
- exactVersion
- 1.1.19
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Radix Dialog supplies modal focus mechanics, while labeling, destructive-action wording, layout, and testing remain application work.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Dialog Modal Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Modal dialog: modal dialog labeling, initial focus, focus containment, Escape dismissal, and focus return guidance.
- Radix Primitives: Dialog
Radix Primitives · documentation · 2026-07-16
Affirmation couverte : Modal dialog: documented Radix Dialog parts, modal focus management, portals, overlay, and dismissal hooks.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.