Ajoutez les mentions légales avec le composant modal
Dans le même genre que le composant offcanvas
, Bootstrap 5 met à notre disposition le composant modal
.
En quoi la modal
est différente du offcanvas
?
En termes de fonctionnement, les deux composants sont similaires, c’est dans la forme qu’ils se différencient.
Concrètement, c’est une fenêtre “popup” qui s’affiche par-dessus la page affichée et qui est souvent utilisée dans le cadre de validation d’une action (ex. : “Êtes-vous sûr de vouloir supprimer XX ?”) ou pour afficher un contenu annexe (notre cas).
En nous rendant sur la documentation Bootstrap 5 associée aux modals, nous allons pouvoir commencer par étudier la structure de ces dernières.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Encore une fois ici, Bootstrap garde la même logique dans la structure de ses composants. On retrouve dans un premier temps le bouton sur lequel est liée l’activation de la modal. Les attributs data-*
servent à faire le lien avec le JS de Bootstrap.
Ensuite, nous avons la modal en elle-même qui est composée de :
Une
div
globale avec les classes.modal
et.fade
(“.fade” concerne l’animation de l’apparition) et unid
unique.Une autre
div
avec la classe.modal-dialog
qui englobe les troisdiv
qui vont structurer le contenu de la modal.Trois
div
sœurs (au même niveau hiérarchique) avec les classes.modal-header
,.modal-body
et.modal-footer
.Enfin du contenu divers dont un élément avec la classe titre
.modal-title
.
Dans notre cas, nous avons besoin d’une modal classique, avec une div.modal-header
et une div.modal-body
. Vous noterez que le plus important pour utiliser les modals de Bootstrap 5, ce sont la div.modal
et la div.modal-dialog
, car la structure interne est interchangeable au besoin.
À vous de jouer !
Votre mission :
Créer une modal qui se déclenchera au clic sur le lien “Mentions légales”.
La modal sera composée d’un header comprenant un titre et une croix pour fermer la modal, et d’un body dans lequel vous mettrez du faux texte (lorem ipsum).
Contrairement à l’exemple, nous lions l’ouverture de notre modal sur notre lien “Mention légales” qui est une ancre (a
). L’important est de respecter les attributs data-*
qui sont les déclencheurs de la modal.
Une fois que vous avez effectué ces modifications, suivez-moi dans le screencast ci-dessous pour comparer votre travail avec le mien !
Rendez votre site plus accessible grâce aux “tooltips”
Un petit composant bien utile et que vous avez sûrement déjà vu sur des sites web, c’est le tooltip
.
C’est ce petit texte qui s’affiche au survol de la souris, souvent pour apporter plus d’information à un élément qui en a besoin – une icône, par exemple.
Ce composant fonctionne avec la bibliothèque JS tiers “Popper JS” dont on a déjà parlé au tout début de ce cours. Ne vous inquiétez pas, cette bibliothèque est déjà ajoutée à Bootstrap, car nous avons choisi d’utiliser la solution “bundle”.
Le tooltip
nécessite une initialisation en JS que l’on doit coder nous-même. Pas de panique, tout est expliqué dans la documentation Bootstrap (comme d’habitude), et voici le code d’initialisation :
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
L’idée générale du script, c’est de récupérer dans la page HTML (le DOM) tous les éléments qui ont un attribut [data-bs-toggle=”tooltip”]
. Une fois ces éléments récupérés, le script va juste lier ces derniers avec le reste du JS fourni par Bootstrap 5.
Ce bout de code nous permet donc d’utiliser les tooltips dans toutes les pages où il est présent.
Voici à quoi va ressembler une icône avec un tooltip :
<a href="#" class="text-decoration-none text-dark" data-bs-toggle="tooltip"
title="LinkedIn">
<i class="fab fa-linkedin fa-2x"></i>
</a>
À vous de jouer !
À partir de là, vous êtes en mesure d’ajouter des tooltips sur les éléments non textuels de votre portfolio :
Les liens avec des icônes des réseaux sociaux dans le footer.
Les pourcentages des barres de progression.
Une fois que vous avez effectué ces modifications, suivez-moi dans le screencast ci-dessous pour comparer votre travail avec le mien !
En résumé
Il est possible d’utiliser les
modal
de Bootstrap 5 pour ajouter à une page du contenu qui ne sera visible qu’au clic d’un bouton.Le contenu d’une modal peut être composé de n’importe quel élément HTML que l’on souhaite.
Le tooltip est un moyen d'associer du texte à un élément non textuel.
Le tooltip nécessite un code JS personnalisé pour fonctionner, car il dépend de la bibliothèque tierce Popper.js.
Vous voilà avec un site complet avec du contenu structuré et accessible pour vos utilisateurs ! Dans la prochaine partie, il est temps de créer vos propres fonctionnalités et thèmes. 😎 N’oubliez pas de valider vos acquis avec un quiz avant de me rejoindre dans la dernière partie !