Modaux Bootstrap 5

Modal

Le composant Modal est une boîte de dialogue/pop-up affichée en haut de la page actuelle :

Comment créer une modalité

Voici un exemple de création d'une modalité de base :

Exemple

<!-- Bouton pour ouvrir la modalité -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Ouvrir la modalité
</button>
<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Titre de la modalité -->
      <div class="modal-header">
        <h4 class="modal-title">Titre de la Modalité</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Corps de la modalité -->
      <div class="modal-body">
        Corps de la modalité ..
      </div>
      <!-- Pied de page de la modalité -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>

Essayez-le vous-même

pour ajouter l'animation

Veuillez utiliser .fade Ajoutez la classe pour ajouter un effet d'animation en ouvrant et fermant la modalité :

Exemple

<!-- Modal avec effet de fondu -->
<div class="modal fade"></div>
<!-- Modal sans animation -->
<div class="modal"></div>

Essayez-le vous-même

Taille de la modalité

en ajoutant pour la modalité petite .modal-sm la classe (max-width 300px) pour la modalité grande .modal-lg la classe (max-width 800px) ou ajoutez pour la modalité ultra-grand .modal-xl pour modifier la taille de la modalité (max-width 1140 pixels). La largeur maximale par défaut est de 500 pixels.

Veuillez .modal-dialog Ajoutez également les classes de taille <div> Élément :

Modal Petit

<div class="modal-dialog modal-sm">

Essayez-le vous-même

Modal Grand

<div class="modal-dialog modal-lg">

Essayez-le vous-même

Modal Extra Large

<div class="modal-dialog modal-xl">

Essayez-le vous-même

Par défaut, la taille du modal est "medium" (max-width de 500px).

Modal plein écran

Si vous souhaitez que le modal couvre toute la largeur et la hauteur de la page, utilisez .modal-fullscreen Classe :

Exemple

<div class="modal-dialog modal-fullscreen">

Essayez-le vous-même

Modal plein écran responsive

Vous pouvez également utiliser .modal-fullscreen-*-* Classe contrôlant quand le modal doit être affiché en plein écran :

Classe Description Exemple
.modal-fullscreen-sm-down Plein écran en dessous de 576px Essayez-le vous-même
.modal-fullscreen-md-down Plein écran en dessous de 768px Essayez-le vous-même
.modal-fullscreen-lg-down Plein écran en dessous de 992px Essayez-le vous-même
.modal-fullscreen-xl-down Plein écran en dessous de 1200px Essayez-le vous-même
.modal-fullscreen-xxl-down Plein écran en dessous de 1400px Essayez-le vous-même

Modal centré

En utilisant .modal-dialog-centric Classe, centrée verticalement et horizontalement dans la page :

Exemple

<div class="modal-dialog modal-dialog-centered">

Essayez-le vous-même

Modal de défilement

Lorsque le modal contient beaucoup de contenu, une barre de défilement est ajoutée à la page. Regardez l'exemple suivant pour comprendre :

Exemple

<div class="modal-dialog">

Essayez-le vous-même

Cependant, en utilisant .modal-dialog-scrollable Ajouter à .modal-dialog Il est possible de faire défiler uniquement à l'intérieur du modal, et non la page elle-même :

Exemple

<div class="modal-dialog modal-dialog-scrollable">

Essayez-le vous-même