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 modaux sont essentiellement des boîtes de dialogue qui s’affichent au-dessus du contenu principal et nécessitent une interaction de l’utilisateur pour être fermées. Ils peuvent être activés par différents événements comme des clics sur des boutons, des liens ou des fonctions JavaScript.

Fonctionnalités principales

Les modaux Bootstrap offrent des tailles personnalisables, des animations, des arrière-plans et un positionnement ajustable. 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 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 additionnel dans le pied du modal ;
• fade : Applique une animation d’apparition progressive au modal pour des transitions fluides ;
• modal-dialog-centered : Centre verticalement le modal dans la fenêtre d’affichage ;
• modal-static : Empêche la fermeture du modal en cliquant à l’extérieur ou en appuyant sur la touche Échap.

Exemple 1 : Modal basique

Exemple 2 : Modal animé