Bootstrap5 Fenêtre modale

Une fenêtre modale (Modal) est une fenêtre enfant qui se superpose au formulaire parent. Habituellement, le but est d'afficher le contenu d'une source séparée, permettant une certaine interaction sans quitter le formulaire parent. La fenêtre enfant peut fournir une interaction d'informations, etc.

---

Comment créer une fenêtre modale

L'exemple suivant crée un effet modal simple :

---

Ajouter une animation

Utilisez la classe .fade pour définir l'effet d'apparition ou de fermeture de la modale :

---

Taille du modal

Nous pouvons utiliser la classe.modal-smpour créer un petit modal, la classe.modal-lgpeut créer un grand modal.

La classe de taille est placée<div>après la classe.modal-dialogde l'élément :

Affichage plein écran

Utilisez la classe.modal-fullscreenpour afficher le modal en plein écran :

Utilisez la.modal-fullscreen-*-*classe pour contrôler à quelle taille d'écran afficher 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

---

Affichage centré de la fenêtre modale

Utilisez la.modal-dialog-centeredclasse pour centrer la fenêtre modale à la fois horizontalement et verticalement:

---

Barre de défilement de la fenêtre modale

Par défaut, si la fenêtre modale contient beaucoup de contenu, la page génère automatiquement une barre de défilement, et la fenêtre modale défile avec la page :

Si nous voulons uniquement définir une barre de défilement à l'intérieur de la fenêtre modale, nous pouvons utiliser la classe.modal-dialog-scrollable:

Autres extensions