Modal et Offcanvas

Bootstrap offre les fonctionnalités de "popup" qu'on voit souvent sur les sites de vente :

• Modal : fenêtre de message qui peut aussi offrir la possibilité d'afficher du contenu par-dessus une page web
• Offacanvas : fenêtre qui s'ouvre sur le côté de l'écran pour offrir une information spontanée

Modal ou fenêtre popup

Fenêtre qui peut afficher un message ou du contenu dans une fenêtre popup.

Le contenu peut être un simple message ou encore des images ou encore un formulaire complet de choix d'options... Il n'y a aucune limite au contenu qu'on peut mettre dans un modal.

Fonctionnement :

Un élément de la page, clickable, déclenche l'ouverture d'un bloc de contenu initialement caché.

Exemples :

Le code

1. Créer un élément cliquable qui va déclencher l'ouverture du modal

   Cet élément dot avoir deux informations :

   • data-bs-toggle : qu'est-ce qu'il déclenche
   • data-bs-target : quel bloc HTML utiliser pour la création du modal

   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirmation">
       Vider le panier
   </button>
   

2. Créer le bloc de contenu de la fenêtre modal à afficher

   <!--Fenêtre de confirmation lorsque le panier est vidé-->
   <div class="modal fade" id="confirmation">
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <h1 class="modal-title fs-5">Confirmation</h1>
                   <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
               </div>
               <div class="modal-body">
                   Voulez-vous vraiment vider votre panier ?
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                   <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="viderPanier()">Confirmer</button>
               </div>
           </div>
       </div>
   </div>
   

Offcanvas ou panneau latéral

Fenêtre qui s'ouvre sur le côté de l'écran pour offrir une information spontanée.

On l'utilise souvent pour montrer un résumé du panier sur les sites de vente.

Exemple :

Le code

1. Créer un élément cliquable qui va déclencher l'ouverture du panneau latéral

   Cet élément dot avoir deux informations :

   • data-bs-toggle : qu'est-ce qu'il déclenche
   • data-bs-target : quel bloc HTML utiliser pour la création du panneau latéral

   <button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#confirmation">
       Ajouter au panier
   </button>
   

2. Créer le bloc de contenu du panneau latéral

   <!--Zone de confirmation cachée par défaut-->
   <div class="offcanvas offcanvas-start" id="confirmation">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title">Ajouté à votre panier</h5>
       <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body">
       <p id="zoneGauche">
         Ces articles ont été ajoutés à votre panier
       </p> 
     </div>
   </div>
   

Emplacement

Pour afficher le panneau à droite ou en haut ou en bas, on mdifie la classe offcanvas-start pour l'emplacement voulu.

• offcanvas-start : gauche
• offcanvas-end : droite
• offcanvas-top : haut
• offcanvas-bottom : bas