Dialogue modal
Le dialogue modal est une boîte qui se superpose au contenu de la page, en plein centre, à la suite d’une action déclenchée directement par l’utilisateur. Il sert à communiquer de l’information contextuelle.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Ce composant se décline en trois variantes :
- Dialogue d’alerte
- Dialogue de confirmation
- Dialogue d’action
Quand l’utiliser
Le dialogue modal est utilisé pour attirer l’attention de l’utilisateur sur des informations contextuelles à la tâche (par exemple, confirmer ou non la suppression d’un compte) ou pour demander des informations à l’utilisateur (par exemple, les informations de connexion à un compte).
On l’utilise seulement lorsque l’information communiquée est essentielle puisque son apparition peut distraire ou même perturber le cheminement de l’utilisateur. Il est préférable de limiter l’utilisation du dialogue modal, car il peut être perçu comme étant du bruit visuel plutôt qu’une boîte communiquant de l’information.
Voici des indications sur les contextes d’utilisation selon les variantes :
- Dialogue d’alerte : Il apparaît lorsqu’une action immédiate est requise.
- Dialogue de confirmation : Contrairement au dialogue d’alerte, le dialogue de confirmation n’est pas de nature urgente. Il offre un retour d’information à l’utilisateur, lui permettant de confirmer ou non la réussite de la tâche effectuée.
- Dialogue d’action : Le dialogue d’action sert à effectuer une courte tâche contextuelle, par exemple la création d’un nouvel événement au calendrier.
Quand ne pas l’utiliser
Ne pas utiliser le dialogue modal lorsque l’information est secondaire ou qu’elle peut être intégrée directement dans la page sans interrompre l’utilisateur.
Anatomie
- Titre du dialogue modal
- Contenu du dialogue modal
- Bouton de fermeture
- Bouton(s)
- Fond assombri
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Dialogue modal (complet)
L’information contenue dans le dialogue doit être claire et concise. Un dialogue n’est pas une page de contenu. Ne pas dépasser l’équivalent de trois phrases.
Idéalement, un dialogue modal ne devrait pas comporter de barre de défilement. Cette option est ajoutée seulement en cas de nécessité et la barre de défilement doit être désactivée de la page en arrière-plan pour éviter tout conflit.
Ne pas insérer de données complexes, d’images ni de tableaux.
Voici des indications sur le contenu selon les variantes :
- Dialogue d’alerte : Le dialogue d’alerte contient un message ainsi qu’un ou plusieurs boutons d’action.
- Dialogue de confirmation : Ce type de dialogue peut inclure des champs de formulaire, mais ne doit pas remplacer un formulaire complet. Par exemple, il peut servir à renommer le nom d’un dossier et à le sauvegarder.
- Dialogue d’action : Requiert la complétion de un à quatre champs de formulaire.
Titre du dialogue modal
Le dialogue modal comprend toujours un titre.
Bouton de fermeture
Dans le cas d’une action obligatoire, le bouton de fermeture n’est pas affiché. L’utilisateur doit alors compléter l’action en choisissant l’une des options proposées dans le dialogue.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Dialogue modal (complet)
Positionnement et alignement : Le dialogue modal est centré horizontalement et verticalement dans la fenêtre.
Dimensions : La hauteur et la largeur du dialogue modal sont variables en fonction du contenu et du support. La largeur maximum est cependant de 600 px. Toutes les caractéristiques restent les mêmes au format mobile.
Contenu du dialogue modal
Espacements : Pour les espacements et les caractéristiques entre les différents de contenu présents dans le dialogue d’action, consulter les fiches des composants respectifs.
Bouton(s)
Positionnement et alignement : En format bureau, les boutons sont alignés en bas à droite et leur ordre est Tertiaire → Secondaire → Principal. En format mobile, si le libellé d’un bouton d’action est trop long, il est possible de placer les boutons un en dessous de l’autre et leur ordre devient Principal → Secondaire → Tertiaire.
Dimensions : Pour les dimensions et les styles de boutons, consulter la fiche Boutons.
Espacements : Pour les espacements et les caractéristiques entre les boutons, consulter la fiche Boutons.
Fond assombri
Dimensions : Le fond assombri couvre 100 % de la fenêtre et rend la page en arrière‑plan inactive.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Dialogue modal (complet)
Le dialogue demeure affiché jusqu’à ce que l’utilisateur prenne une décision.
Il n’apparaît jamais par défaut. Il est uniquement déclenché par une action de l’utilisateur.
Lorsque le dialogue modal est activé, l’arrière-plan de la page devient plus sombre pour qu’il soit en évidence.
Le dialogue modale peut être fermé de plusieurs façons :
- Bouton de fermeture : cliquer ou taper sur le bouton situé en haut à droite.
- Clavier : utiliser la touche Échap.
- Clic sur l’arrière-plan : cliquer sur la zone grisée en dehors de la feuille permet de la fermer.
Dans le cas d’une action obligatoire, ces options de fermeture ne sont pas offertes : aucun bouton de fermeture ni clic extérieur n’est permis. L’utilisateur doit alors choisir l’une des actions proposées dans le dialogue.
Fond assombri
Le fond assombri rend la page en arrière‑plan inactive.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur l’icône de fermeture « X » pour fermer le dialogue modal.
- Cliquer sur un bouton pour exécuter l’action associée.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser la touche Échap pour fermer le dialogue modal.
- Naviguer entre les éléments avec la touche Tab et activer un bouton avec Entrée.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 17 février 2026