1. Accueil  
  2. Design  
  3. Composants  
  4. Dialogue modal

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.

Lorsque le dialogue modal est activé, le reste de la page est assombri et devient inactif.

Exemple


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.

Il existe 3 types de dialogue modal.

Dialogue d’alerte

Il apparaît lorsqu’une action immédiate est requise. Le dialogue d’alerte contient un message ainsi qu’un ou plusieurs boutons d’action. 

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. 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

Le dialogue d’action sert à effectuer une courte tâche contextuelle, par exemple la création d’un nouvel événement au calendrier, et requiert la complétion de 1 à 4 champs de formulaire. 

Comment l'utiliser

Peu importe le type de dialogue utilisé, les critères suivants doivent être respectés :

  • 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.
  • 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 3 phrases.
  • Ne pas insérer de données complexes, d’images ni de tableaux.

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.

Il est possible de fermer le dialogue modal en cliquant sur l’icône de fermeture « X » ou sur un bouton. Un clic ailleurs dans le dialogue modal ou en dehors de celui-ci ne provoque pas sa fermeture.

Informations techniques

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.

Des marges intérieures de 32 px de chaque côté séparent le contenu des bords de la fenêtre modale. L’icône de fermeture « X » est à une distance de 16 px horizontalement et verticalement du bord.

Le dialogue modal comprend toujours un titre de niveau 4. Le dégagement entre le titre et le contenu est de 24 px. 

Dans un dialogue d’action ou de confirmation, le dégagement entre la fin du contenu et les boutons d’actions est de 24 px. 

Pour les espacements et les caractéristiques entre les différents styles de contenu présents dans le dialogue d’action, consulter les fiches des composants respectifs.

Mobile

Toutes les caractéristiques restent les mêmes au format mobile. 

Si le libellé d’un bouton d’action est trop long, il est possible de superposer les boutons. Le bouton d’action principal est toujours en haut, et le bouton secondaire ou tertiaire se situe sous ce dernier.

Exemple


CSS de la boîte
background-color: #ffffff;

CSS de l’icône de fermeture
color: #095797;

CSS du titre
font-family: Roboto;
font-weight: bold;
font-size: 24px;
color: #223654;

CSS du contenu
font-family: Open Sans;
font-weight: regular;
font-size: 16px;
color: #223654;

CSS de la page assombrie
background-color: #223654;
opacity: 40%;

Dernière mise à jour : 6 novembre 2023

Évaluation de page

L’information sur cette page vous a-t-elle été utile?
Avis général

Des questions ou besoin de renseignements?

Communiquez avec Services Québec