Conseils
Les fenêtres modales sont un type de fenêtre contextuelle qui se superpose au contenu de la page actuelle et qui exige de l’utilisateur qu’il se concentre sur une information particulière ou qu’il effectue une action avant de pouvoir revenir au site Web ou à l’application. Les fenêtres modales se composent des éléments suivants :
- En-tête de la modale : Le titre de la fenêtre modale et le bouton de fermeture situé dans le coin supérieur droit.
- Corps de la modale : La zone de contenu de la fenêtre modale. Elle défile
lorsqu’elle dépasse une hauteur de
50vh. - Pied de page de la modale (facultatif) : À utiliser uniquement lorsque la fenêtre modale contient des boutons d’action.
Les fenêtres modales interrompent le flux de travail et doivent être utilisées avec modération pour éviter de causer de la frustration ou de la confusion. Vous pouvez les utiliser pour :
- Obtenir une confirmation explicite de l’utilisateur pour une action comme la suppression d’un élément ou d’un compte.
- Présenter des informations d’assistance ou des tutoriels qui aident les utilisateurs à accomplir leurs tâches.
- Veiller à ce que l’utilisateur se concentre sur une tâche ou un élément de contenu précis.
- Permettre à l’utilisateur de saisir des informations ou d’effectuer une action sans quitter la page.
- Afficher du contenu (comme une image, un document ou une vidéo) sans que l’utilisateur ait à quitter la page.
- Fournir des informations supplémentaires qui ne sont pas adaptées à l’interface utilisateur, qui l’encombrent ou qui la compliquent lorsqu’elles y sont directement incluses.
À faire
- Utilisez les fenêtres modales avec modération.
- Utilisez des fenêtres modales pour des interactions courtes et ponctuelles.
- Incluez toujours un bouton de fermeture.
- Incluez un titre et une description clairs.
- Limitez le nombre d’actions qui peuvent être effectuées dans la fenêtre modale (par exemple : soumettre, annuler/fermer).
À ne pas faire
- N’utilisez pas de fenêtres modales pour afficher de longs contenus. Il est plus logique de les présenter sur une page distincte.
- Ne supprimez pas et ne déplacez pas le bouton de fermeture habituellement situé dans le coin supérieur droit.
- N’utilisez pas de titres généraux qui manquent de précision.
- N’utilisez pas de fenêtres modales pour de petites définitions qui auraient pu être présentées dans des infobulles.
Où placer le contenu modal dans votre code
-
Placement général : nous vous recommandons de placer le contenu modal (.gnb-modal)
avant la balise de fermeture
</main>. Bien qu’il puisse fonctionner n’importe où, le placer à cet endroit facilite l’organisation et la lisibilité. -
En dehors des formulaires : placez votre contenu modal en dehors de tout élément
<form>. Cela évite que le bouton de fermeture ne déclenche le rechargement de la page, ce qui est un problème connu avec ASP.net. - Accordéons : si vous présentez un contenu modal à l’aide d’un accordéon, assurez-vous de le placer après la balise de fermeture du bloc accordéon. Le placer à l’intérieur de l’accordéon peut provoquer des problèmes d’index z, faisant apparaître les étiquettes de l’accordéon au-dessus de la superposition modale.
Pour intégrer ce composant, ajoutez gnb-modals-1.0.0.js en bas de votre page avant la balise de fermeture du corps.
Fenêtre modale
Vous pouvez utiliser une fenêtre modale sans pied de page pour afficher des informations d’aide concernant un champ d’application.
Vous pouvez lancer la fenêtre au moyen d’un bouton ou d’un lien :
Code HTML
<!-- Bouton -->
<button class="modal-button gnb-btn" data-target="modal" aria-haspopup="dialog" aria-controls="modal">Lancer la fenêtre modale</button>
<!-- Lien -->
<a tabindex="0" data-target="modal" aria-haspopup="dialog" aria-controls="modal" class="modal-button info">Lancer la fenêtre modale</a>
<!-- Modale -->
<div class="gnb-modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal"><span class="sr-only">Fermer la fenêtre modale</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title">Titre de la fenêtre modale</h2>
</div>
<div class="gnb-modal-body" id="modal-description">
<p>
Ceci est une modale qui n'a pas de pied de page, adaptée pour des messages simples.
</p>
</div>
</dialog>
</div>
<!-- Ajoutez ceci en bas de votre page avant la balise de fermeture du corps -->
<script src="gnb-modals-1.0.0.js"></script>
Fenêtre modale d’infobulle pour étiquette de champ
Code HTML
<!-- Champ avec étiquette d'infobulle -->
<label for="first-name"><a tabindex="0" data-target="modal-address" aria-haspopup="dialog" aria-controls="modal-address" class="modal-button info">Adresse du service</a></label>
<input type="text" name="first-name" id="first-name" />
<!-- Dialogue modal d'info de champ -->
<div class="gnb-modal" id="modal-address" role="dialog" aria-modal="true" aria-labelledby="modal-title-address" aria-describedby="modal-description-address">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal-address"><span class="sr-only">Fermer la fenêtre modale</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title-address">Adresse du service</h2>
</div>
<div class="gnb-modal-body" id="modal-description-address">
<p>
Votre service doit être installé à une adresse au Nouveau-Brunswick pour être éligible à cette remise.
</p>
</div>
</dialog>
</div>
<!-- Ajoutez ceci en bas de votre page avant la balise de fermeture du corps -->
<script src="gnb-modals-1.0.0.js"></script>
Fenêtre modale avec boutons d’action
Si vous proposez des actions à l’utilisateur dans la fenêtre modale, assurez-vous d’insérer les boutons d’action dans le pied de page et d’afficher l’action principale à gauche. Consultez les conseils relatifs aux boutons pour des exemples de combinaisons de boutons adaptées aux interactions.
Lancer une fenêtre modale avec des boutons d’action
Code HTML
<!-- Bouton -->
<button class="modal-button gnb-btn" data-target="modal-with-actions" aria-haspopup="dialog" aria-controls="modal-with-actions">Lancer la fenêtre modale</button>
<!-- Lien -->
<a tabindex="0" data-target="modal-with-actions" aria-haspopup="dialog" aria-controls="modal-with-actions" class="modal-button info">Lancer la fenêtre modale</a>
<!-- Modale avec boutons d'action -->
<div class="gnb-modal" id="modal-with-actions" role="dialog" aria-modal="true" aria-labelledby="modal-title-with-actions" aria-describedby="modal-description-with-actions">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal-with-actions"><span class="sr-only">Fermer la fenêtre modale</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title-with-actions">Titre de la fenêtre modale avec actions</h2>
</div>
<div class="gnb-modal-body" id="modal-description-with-actions">
<p>
Cette fenêtre modale propose deux actions que l'utilisateur peut prendre. Les boutons d'action doivent être placés dans le <code>.gnb-modal-footer</code> avec l'action principale à gauche.
</p>
</div>
<div class="gnb-modal-footer">
<button type="button" class="gnb-btn close-modal-button" data-target="modal-with-actions">Soumettre</button>
<button type="button" class="gnb-btn-secondary close-modal-button" data-target="modal-with-actions">Annuler</button>
</div>
</dialog>
</div>
<!-- Ajoutez ceci en bas de votre page avant la balise de fermeture du corps -->
<script src="gnb-modals-1.0.0.js"></script>
Fenêtre modale avec plusieurs boutons d’action
Si vous souhaitez gérer plus d’une fenêtre modale par page, assurez-vous de les différencier par un
identifiant (attribut id) dans le code HTML.
Code HTML
<!-- Bouton première modale -->
<button class="modal-button gnb-btn" data-target="modal-1" aria-haspopup="dialog" aria-controls="modal-1">Lancer la fenêtre modale 1</button>
<!-- Lien première modale -->
<a tabindex="0" data-target="modal-1" aria-haspopup="dialog" aria-controls="modal-1" class="modal-button info">Lancer la fenêtre modale 1</a>
<!-- Première modale -->
<div class="gnb-modal" id="modal-1" role="dialog" aria-modal="true" aria-labelledby="modal-title-1" aria-describedby="modal-description-1">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal-1"><span class="sr-only">Fermer la fenêtre modale</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title-1">Titre de la fenêtre modale 1</h2>
</div>
<div class="gnb-modal-body" id="modal-description-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet turpis venenatis, rhoncus ligula vel, fermentum odio.
</p>
</div>
<div class="gnb-modal-footer">
<button type="button" class="gnb-btn close-modal-button" data-target="modal-1">Soumettre</button>
<button type="button" class="gnb-btn-secondary close-modal-button" data-target="modal-1">Annuler</button>
</div>
</dialog>
</div>
<!-- Bouton deuxième modale -->
<button class="modal-button gnb-btn" data-target="modal-2" aria-haspopup="dialog" aria-controls="modal-2">Lancer la fenêtre modale 2</button>
<!-- Lien deuxième modale -->
<a tabindex="0" data-target="modal-2" aria-haspopup="dialog" aria-controls="modal-2" class="modal-button info">Lancer la fenêtre modale 2</a>
<!-- Deuxième modale -->
<div class="gnb-modal" id="modal-2" role="dialog" aria-modal="true" aria-labelledby="modal-title-2" aria-describedby="modal-description-2">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal-2"><span class="sr-only">Fermer la fenêtre modale</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title-2">Titre de la fenêtre modale 2</h2>
</div>
<div class="gnb-modal-body" id="modal-description-2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet turpis venenatis, rhoncus ligula vel, fermentum odio.
</p>
</div>
<div class="gnb-modal-footer">
<button type="button" class="gnb-btn close-modal-button" data-target="modal-2">Soumettre</button>
<button type="button" class="gnb-btn-secondary close-modal-button" data-target="modal-2">Annuler</button>
</div>
</dialog>
</div>
<!-- Ajoutez ceci en bas de votre page avant la balise de fermeture du corps -->
<script src="gnb-modals-1.0.0.js"></script>