Modal | smnarnold

La composante Modal de Bootstrap permet de créer facilement des fenêtres contextuelles, plus communément connues sous leur nom anglophone "popup".

Lorsqu'une de ces fenêtres est ouverte, elle s'affiche par-dessus le site, masquant partiellement le reste du contenu à l'aide d'un fond grisé semi-transparent, permettant de mettre l'emphase sur la fenêtre en question. Ces fenêtres ne réagissent pas au défilement de la page, elles restent donc prédominantes jusqu'à leur fermeture, ce qui les rend tout indiquées pour afficher certains éléments tels que:

Un formulaire (connexion, quiz, abonnement à une infolettre, etc.)
Une image en meilleure résolution.
Un avertissement. Par exemple, "Votre session a expiré", etc.

Définition

Pour définir une fenêtre contextuelle de type modal, il faut insérer sa structure de base dans un fichier HTML.

Par exemple:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

Dans cet exemple, la classe .modal permet de créer le fond semi-transparent masquant partiellement le reste du site. La classe .modal-dialog se charge de créer la fenêtre de base et .modal-content s'occupe de gérer le positionnement des différents éléments de contenu dans la fenêtre modal.

Contenu

L'élément .modal-content peut contenir trois types de contenu, soit:

Contiens des informations telles que:

Le titre de la fenêtre.
Une croix permettant de fermer la fenêtre.
Etc.

<div class="modal-header">
  <h2 class="modal-title">Titre de ma fenêtre</h2>
  <button class="btn-close" data-bs-dismiss="modal" aria-label="Fermer la fenêtre"></button>
</div>

L'attribut data-bs-dismiss="modal" permet de spécifier à n'importe quel élément dans une fenêtre modal de fermer la fenêtre en question.

Permets de contenir le contenu principal de la fenêtre: son texte, son image, son formulaire, etc.

Par exemple:

<div class="modal-body">
  <p>Message de ma fenêtre</p>
</div>

Contiens généralement des boutons en lien avec la fenêtre.

Bouton confirmant un changement.
Bouton de soumission de formulaire.
Bouton d'annulation permettant de fermer la fenêtre.
Etc.

<div class="modal-footer">
  <button class="btn" data-bs-dismiss="modal">Annuler</button>
</div>

Déclenchement

Par défaut, les fenêtres modal sont masquées. Pour les afficher, il est nécessaire d'ajouter un élément permettant de déclencher leur apparition. Ce bouton doit contenir deux attributs clés:

data-bs-toggle="modal" indiquant qu'il contrôle une fenêtre "modal".
data-bs-target="#example" spécifiant la fenêtre "modal" contrôlée.

<button class="btn" data-bs-toggle="modal" data-bs-target="#example">
  Ouvrir
</button>

Taille

Par défaut, la fenêtre modal de Bootstrap à une largeur de 500px. Cependant, il est possible de modifier cette taille en ajoutant une classe supplémentaire à l'élément .modal-dialog.

CLASSES	TAILLE
.modal-sm	300px
.modal-lg	800px
.modal-xl	1140px

Par exemple:

<div class="modal" tabindex="-1">
  <div class="modal-dialog modal-lg">...</div>
</div>

Alignement vertical

Par défaut, les fenêtres modal Bootstrap sont affichées vers le haut de la page. Cependant, il est possible de centrer ces fenêtres verticalement en ajoutant la classe .modal-dialog-centered à l'élément modal-dialog.

Par exemple:

<div class="modal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">...</div>
</div>

Transition

Par défaut, la fenêtre modal apparait brusquement lorsque déclenchée. Cependant, il est possible d'ajouter une transition afin de rendre son apparition plus élégante grâce à une transition. Pour ce faire, il suffit d'ajouter la classe .fade à l'élément .modal.

<div class="modal fade" tabindex="-1">
  <div class="modal-dialog">...</div>
</div>

Modal