Modales

Le composant Modal de Bootstrap est un outil utile pour présenter du contenu interactif tel que des formulaires de connexion, des galeries d'images ou des alertes. Les modals sont essentiellement des boîtes de dialogue qui apparaissent au-dessus du contenu principal et nécessitent une interaction de l'utilisateur pour se fermer. Ils peuvent être activés à l'aide de différents événements tels que des clics de bouton, des liens ou des fonctions JavaScript.

Caractéristiques Clés

Les modals Bootstrap offrent des tailles personnalisables, des animations, des arrière-plans et un positionnement. Ils prennent en charge divers types de contenu et peuvent être déclenchés par différents événements. Ils sont également accessibles à tous les utilisateurs et peuvent être améliorés en ajoutant des attributs ARIA et une gestion du focus.

Classes d'Utilisation

• modal: Classe de base pour créer une boîte de dialogue modale;
• modal-dialog: Conteneur pour le contenu du modal;
• modal-content: Enveloppe pour l'en-tête, le corps et le pied de page du modal;
• modal-header: Conteneur pour le titre du modal et le bouton de fermeture optionnel;
• modal-title: Style le titre du modal;
• modal-body: Conteneur pour le contenu principal du modal;
• modal-footer: Conteneur pour les boutons ou le contenu supplémentaire dans le pied de page du modal;
• fade: Applique une animation de fondu au modal pour des transitions fluides;
• modal-dialog-centered: Centre le modal verticalement dans la fenêtre d'affichage;
• modal-static: Empêche le modal d'être fermé en cliquant à l'extérieur ou en appuyant sur la touche Échap.

Exemple 1 : Modal Basique

Exemple 2 : Modal Animé