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é, l’arrière-plan de la page devient plus sombre pour qu’il soit en évidence.

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. 

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. 

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. 

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

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