Modale - Modal

La modale permet de concentrer l’attention de l’utilisateur exclusivement sur une tâche ou un élément d’information, sans perdre le contexte de la page en cours. Ce composant nécessite une action de l’utilisateur afin d'être clôturée ou ouverte.

 

Modale simple

La modale par défaut permet de mettre en évidence une information qui ne nécessite pas d’action de l’utilisateur. Elle s’affiche à la suite du clic sur un bouton.

 

Structure

Elle se compose des éléments suivants :

  • Le bouton Fermer - obligatoire.

  • Le titre obligatoire, avec icône optionnelle.

  • La zone de contenu - obligatoire.

  • Un overlay disposé à l’arrière du composant - obligatoire.


A partir du point de rupture MD ce composant s’affiche au centre de la page. ( Consultez la documentation Grille, pour découvrir les points de rupture. )

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!--Bouton d'ouverture de la modale--> <button class="fr-btn" data-fr-opened="false" aria-controls="fr-modal-1"> Titre de modal simple </button> <!-- Modale Simple La balise <dialog> peut être placée n'importe où sur la page, toutefois nous vous conseillons, si vous en avez la possibilité, d'en faire un enfant direct de la balise <body> --> <dialog aria-labelledby="fr-modal-title-modal-1" role="dialog" id="fr-modal-1" class="fr-modal"> <div class="fr-container fr-container--fluid fr-container-md"> <div class="fr-grid-row fr-grid-row--center"> <div class="fr-col-12 fr-col-md-8 fr-col-lg-6"> <div class="fr-modal__body"> <div class="fr-modal__header"> <button class="fr-link--close fr-link" title="Fermer la fenêtre modale" aria-controls="fr-modal-1">Fermer</button> </div> <div class="fr-modal__content"> <h1 id="fr-modal-title-modal-1" class="fr-modal__title"><span class="fr-fi-arrow-right-line fr-fi--lg"></span>Titre de la modale</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.</p> </div> </div> </div> </div> </div> </dialog>

 

Modale avec zone d’action

La modale avec une zone d’action permet de guider l’utilisateur vers des actions attendues.

Par défaut elle reprend les éléments de la modale simple auxquels s’ajoute

  • Une zone d’action obligatoire composée :

    • D’un bouton primaire ou d’un groupe de boutons hiérarchisé

 

A noter : Pour les contenus qui sont trop longs pour s’afficher dans la surface prévue par la modale, un scroll permet de faire défiler l’intégralité de l'information.

 

Modale avec bouton primaire



Modale avec groupe de boutons hiérarchisés

 

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 <!-- Bouton d'ouverture de la modale --> <button class="fr-btn" data-fr-opened="false" aria-controls="fr-modal-2"> Modal avec zone d'action </button> <!-- Modale avec zone d'action La balise <dialog> peut être placée n'importe où sur la page, toutefois nous vous conseillons, si vous en avez la possibilité, d'en faire un enfant direct de la balise <body> --> <dialog aria-labelledby="fr-modal-2-title" id="fr-modal-2" class="fr-modal" role="dialog" > <div class="fr-container fr-container--fluid fr-container-md"> <div class="fr-grid-row fr-grid-row--center"> <div class="fr-col-12 fr-col-md-8 fr-col-lg-6"> <div class="fr-modal__body"> <div class="fr-modal__header"> <button class="fr-link--close fr-link" aria-controls="fr-modal-2">Fermer</button> </div> <div class="fr-modal__content"> <h1 id="fr-modal-2-title" class="fr-modal__title"> <span class="fr-fi-arrow-right-line fr-fi--lg"></span> Titre de la modale </h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.</p> </div> <div class="fr-modal__footer"> <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"> <li> <button class="fr-btn fr-fi-checkbox-line" > Label bouton </button> </li> <li> <button class="fr-btn fr-fi-checkbox-line fr-btn--secondary" > Label bouton </button> </li> </ul> </div> </div> </div> </div> </div> </dialog>

 

Tailles

La modale est disponible en trois tailles afin d’adapter sa largeur au volume de votre contenu.

  • SM pour Small, MD pour Medium, LG pour large

  • La taille medium (MD) est la taille de modale par défaut


La hauteur maximum des modales est fixée à 80% maximum de la hauteur de l'écran en desktop.

Si le contenu est plus long que la hauteur maximale, la barre de scroll du navigateur s’affiche à l’intérieur de la modale afin de pouvoir faire défiler le contenu.

La largeur de la modale est gérée via la grille.
La modale LG utilise la classe  .fr-col-md-8 .
La modale SM utilise la classe  .fr-col-md-4 .

1 2 3 <!-- Modale SM --> <dialog aria-labelledby="fr-modal-title-modal-3" role="dialog" id="fr-modal-3" class="fr-modal"> (...)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!-- Modale SM --> <button class="fr-btn" data-fr-opened="false" aria-controls="fr-modal-3"> Modal avec zone d'action </button> <dialog aria-labelledby="fr-modal-title-modal-3" role="dialog" id="fr-modal-3" class="fr-modal"> <div class="fr-container fr-container--fluid fr-container-md"> <div class="fr-grid-row fr-grid-row--center"> <div class="fr-col-12 fr-col-md-4"> <div class="fr-modal__body"> <div class="fr-modal__header"> <button class="fr-link--close fr-link" title="Fermer la fenêtre modale" aria-controls="fr-modal-3">Fermer</button> </div> <div class="fr-modal__content"> <h1 id="fr-modal-title-modal-3" class="fr-modal__title"><span class="fr-fi-arrow-right-line fr-fi--lg"></span>Titre de la modale SM</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.</p> </div> </div> </div> </div> </div> </dialog> <!-- Modale LG --> <button class="fr-btn" data-fr-opened="false" aria-controls="fr-modal-4" title="Modal LG (ouvre une fenêtre modale)"> Modal avec zone d'action </button> <dialog aria-labelledby="fr-modal-title-modal-4" role="dialog" id="fr-modal-4" class="fr-modal"> <div class="fr-container fr-container--fluid fr-container-md"> <div class="fr-grid-row fr-grid-row--center"> <div class="fr-col-12 fr-col-md-8"> <div class="fr-modal__body"> <div class="fr-modal__header"> <button class="fr-link--close fr-link" title="Fermer la fenêtre modale" aria-controls="fr-modal-4" target="_self">Fermer</button> </div> <div class="fr-modal__content"> <h1 id="fr-modal-title-modal-4" class="fr-modal__title"><span class="fr-fi-arrow-right-line fr-fi--lg"></span>Titre de la modale</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.</p> </div> </div> </div> </div> </div> </dialog>

 

Responsive

En mobile la modale s’affiche sur la quasi totalité de l'écran: 100% - 4W de marge laissée en haut de l'écran.

 

Cas d’une modale simple

 

 

 

Cas d’une modale avec zone d’action

 

 

 

Règles d’utilisation

Usages

  • Utilisez les modales pour afficher des informations importantes. Attention toutefois à les utiliser avec parcimonie car elles sont invasives.

  • La fermeture de la modale doit permettre à l’utilisateur de reprendre sa navigation à l’endroit où il se trouvait auparavant dans la page.

  • Lorsqu’une modale est ouverte, la page en arrière plan se fige, il devient alors impossible de scroller le contenu d’arrière plan avant de l’avoir clôturée.

  • Limitez le nombre d'interactions dans une modale.

Accessibilité

  • Pour fermer la modale l’utilisateur peut cliquer sur le bouton fermer, à l’extérieur de la modale ou appuyer sur la touche “escape” du clavier.

  • Lors de la navigation clavier, le focus ne doit pas sortir de la modale.
    Cette dernière doit être fermée afin de reprendre la navigation dans la page courante (Le focus se place sur le bouton d’ouverture de la modale).
    À cet effet, le focus est repositionné sur le bouton qui a permis d'ouvrir la modale.

  • La balise dialog et son titre sont relié par les attributs aria-labelledby et id .

Contenus

  • Tout type de contenu est autorisé dans la modale.
    Il est toutefois conseillé d’y limiter nombre d'interactions et d'éviter de présenter des décisions complexes qui nécessitent des sources d'informations supplémentaires non disponibles.

  • Lorsqu’une modale intègre des éléments de formulaire requis non renseignés, un message d’erreur s’affiche au niveau du ‘chapô' pour le signaler.

 

Personnalisation

Ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels et les icônes peuvent être changées - voir la structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :