Bootstrap - Modales : Guide pour les débutants

Salut à toi, futurs développeurs web ! Aujourd'hui, nous allons plonger dans l'univers passionnant des modales Bootstrap. Ne t'inquiète pas si tu n'en as jamais entendu parler auparavant - à la fin de ce tutoriel, tu seras capable de créer des fenêtres contextuelles comme un pro !

Bootstrap - Modal

Qu'est-ce qu'une modale ?

Avant de commencer, comprenons ce qu'est une modale. Imagine que tu lis un livre, et soudain une petite note adhésive apparaît avec des informations importantes. C'est essentiellement ce que fait une modale sur un site web ! C'est une boîte de dialogue ou une fenêtre contextuelle qui apparaît au-dessus de la page actuelle.

Composants de la modale

Commençons par la structure de base d'une modale Bootstrap :

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Titre de la modale</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
<p>Le texte du corps de la modale va ici.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary">Enregistrer les modifications</button>
</div>
</div>
</div>
</div>

Reprenons cela :

Le <div> externe avec la classe "modal" est le conteneur principal.
À l'intérieur, nous avons la "modal-dialog" qui contrôle la forme et la position de la modale.
La "modal-content" contient le contenu réel de notre modale.
Ensuite, nous avons trois sections : l'en-tête, le corps et le pied de page.

Arrière-plan statique

Parfois, tu veux que ta modale reste visible jusqu'à ce que l'utilisateur interagisse avec elle. C'est là que l'arrière-plan statique entre en jeu :

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<!-- Contenu de la modale ici -->
</div>

En ajoutant data-bs-backdrop="static", la modale ne se fermera pas lorsque l'utilisateur clique à l'extérieur. data-bs-keyboard="false" empêche la fermeture avec la touche Échap.

Modale scrollable

Tu as beaucoup de contenu ? Pas de problème ! Rends ta modale scrollable :

<div class="modal-dialog modal-dialog-scrollable">
<!-- Contenu de la modale ici -->
</div>

Ajouter la classe modal-dialog-scrollable permet au corps de la modale de se faire défiler tout en conservant l'en-tête et le pied de page en place.

Centrée verticalement

Tu veux que ta modale soit exactement au milieu de l'écran ? Très simple !

<div class="modal-dialog modal-dialog-centered">
<!-- Contenu de la modale ici -->
</div>

La classe modal-dialog-centered fait des merveilles pour centrer ta modale verticalement.

Infobulles et popovers

Tu peux même utiliser des infobulles et des popovers dans tes modales. N'oublie pas de les initialiser :

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

Utilisation de la grille

Le système de grille de Bootstrap fonctionne également à l'intérieur des modales ! Voici un exemple :

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
</div>
</div>

Cela crée une disposition en deux colonnes à l'intérieur du corps de ta modale.

Contenu de la modale variable

Tu peux changer le contenu de ta modale dynamiquement. Voici comment :

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget
var recipient = button.getAttribute('data-bs-whatever')
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = 'Nouveau message à ' + recipient
modalBodyInput.value = recipient
})

Ce script change le contenu de la modale en fonction du bouton qui a déclenché son ouverture.

Basculement entre modales

Tu peux même basculer entre différentes modales :

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<!-- Contenu de la première modale -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Ouvrir la seconde modale</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<!-- Contenu de la seconde modale -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Retour à la première</button>
</div>

Changement d'animation

Tu veux pimenter l'entrée de ta modale ? Essaye de changer l'animation :

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Contenu de la modale -->
</div>

La classe fade ajoute un joli effet de fondu. Tu peux créer des animations personnalisées en utilisant CSS !

Hauteurs dynamiques

Les modales peuvent ajuster leur hauteur en fonction du contenu :

<div class="modal-dialog modal-dialog-scrollable">
<!-- Contenu de la modale avec des hauteurs variables -->
</div>

La classe modal-dialog-scrollable garantit que ta modale a l'air bien, peu importe la longueur du contenu.

Accessibilité

Toujours penser à l'accessibilité ! Utilise aria-labelledby pour référencer le titre de la modale :

<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">Titre de la modale</h5>
<!-- Reste du contenu de la modale -->
</div>
</div>
</div>
</div>

Tailles optionnelles

Les modales existent en différentes tailles :

<!-- Modale petite -->
<div class="modal-dialog modal-sm">...</div>

<!-- Modale grande -->
<div class="modal-dialog modal-lg">...</div>

<!-- Modale extra-large -->
<div class="modal-dialog modal-xl">...</div>

Modale plein écran

Tu veux que ta modale prenne toute la place de l'écran ? Utilise les classes plein écran :

<div class="modal-dialog modal-fullscreen">
<!-- Contenu de la modale -->
</div>

Tu peux aussi rendre la modale plein écran uniquement sur certaines tailles d'écran :

<div class="modal-dialog modal-fullscreen-sm-down">
<!-- Contenu de la modale -->
</div>

Cette modale sera plein écran sur les petits écrans et plus petits.

Et voilà ! Tu es maintenant équipé des connaissances nécessaires pour créer des modales incroyables avec Bootstrap. Souviens-toi, la pratique rend parfait, donc n'hésite pas à expérimenter avec ces concepts. Bon codage !

Méthode	Description
.modal(options)	Active ton contenu en tant que modale. Accepte un objet d'options facultatif.
.modal('toggle')	Bascule manuellement une modale.
.modal('show')	Ouvre manuellement une modale.
.modal('hide')	Cache manuellement une modale.
.modal('handleUpdate')	Ajuste manuellement la position de la modale si sa hauteur change pendant qu'elle est ouverte (par exemple, si une barre de défilement apparaît).
.modal('dispose')	Détruit la modale d'un élément.

Credits: Image by storyset

Tutoriel précédent:

Bootstrap - Groupe de liste

Tutoriel suivant:

Bootstrap - Barres de navigation