Modals
Exemples de modaux
Les modaux sont rationalisés, mais flexibles invites de dialogue alimentées par JavaScript. Ils prennent en charge un certain nombre de cas d'utilisation de la notification utilisateur au contenu entièrement personnalisé et propose un une poignée de sous-composants, de tailles et plus encore utiles.
Modal par défaut
Basculez vers une démo modale fonctionnelle en cliquant sur le bouton ci-dessous. Il glissera vers le bas et apparaîtra en fondu depuis le haut de la page.
Modal plein écran
Un autre remplacement est l'option permettant d'afficher un modal qui couvre la fenêtre d'affichage de l'utilisateur, disponible via des classes de modificateurs placées sur un .modal-fullscreen.
Tailles optionnelles
Les modaux ont trois tailles facultatives, disponibles via des classes de modificateurs à placer sur un .modal-dialog.
Centré verticalement
Ajouter .modal-dialog-centered à .modal-dialog pour centrer verticalement le modal.
Modal défilant
Vous pouvez également créer un modal défilant qui permet de faire défiler le corps du modal en ajoutant .modal-dialog-scrollable à .modal-dialog.
Toile de fond statique
Lorsque la toile de fond est définie sur statique, le modal ne se fermera pas lorsque vous cliquez à l'extérieur. Cliquez sur le bouton ci-dessous pour l'essayer.
Basculer entre les modaux
Basculez entre plusieurs modaux avec un placement intelligent des attributs data-bs-target et data-bs-toggle.
Contenu modal variable
Modal de boutons qui déclenchent tous le même modal avec des contenus légèrement différents. Utilisez les attributs event.ratedTarget et HTML data-bs-target pour faire varier le contenu du modal en fonction du bouton sur lequel vous avez cliqué.
