Groupe de concepts
Surfaces modales
Comparer une tâche modale générale, une décision sensible et la consultation ciblée d'un média avec la page rendue inactive.
Essaie les 3 concepts, compare ce qui change, puis utilise le Pack adapté à ton besoin.
Essayer les composantsSurfaces modales
Essayer
La tâche consiste-t-elle à agir, à confirmer une décision sensible ou à consulter un média ?
Boîte de dialogue modale
Contexte commun aux essais
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.
Boîte de dialogue modale
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.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- 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.
Dialogue d'alerte
Mission
Confirmation sensible - Alert dialog
Ouvrir l'avertissement, lire la conséquence nommée, annuler au clavier, puis rouvrir et confirmer volontairement.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- L'avertissement nomme l'espace, explique la perte définitive et place d'abord le focus sur l'action sûre Conserver.
- Cas limite
- Pendant l'envoi de la suppression, les deux actions empêchent une double activation et le dialogue annonce l'attente.
Ce que cet essai montre
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.
Lequel convient à ton besoin ?
Boîte de dialogue modale
Modifier une fiche compacte sans perdre le contexte
Dialogue d'alerte
Confirmer une suppression définitive
Différence et sources
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.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Voile de fond
La couche qui sépare une surface modale du contenu de page inactif.
Les trois concepts
Les trois comparaisons
Signaux que tu les confonds
Ces descriptions correspondent à tous les concepts du groupe : aucune ne suffit à décider.
- une surcouche centrée bloque la page située derrière
- une couche ciblée doit être terminée ou fermée avant de revenir