fbpx
contact@bootstrap-top-design.com

Les 3 simples procédures à suivre pour réaliser un pop-up (fenêtre modale) Bootstrap

pop-up bootstrap

Aujourd’hui, presque tous les projets web intègrent le composant pop-up, cette petite fenêtre qui se superpose à la page après avoir mis un masque grisé sur celle-ci.

Vous le remarquez souvent, n’est-ce pas !

Ce tutoriel vous montre comment réaliser ces pop-up à l’aide de Bootstrap en trois simples étapes.

Grâce à ce tutoriel, vous saurez désormais comment créer et intégrer dans vos projets, de magnifiques pop-up Bootstrap  qui affichent un avertissement ou des messages publicitaires à l’utilisateur, ou encore qui récoltent les informations de l’utilisateur pour réaliser une opération.

Pré requis :

Le pop-up Bootstrap nécessite l’intégration du script popper.js sur la page avant de pouvoir fonctionner normalement.

Mais aussi il faut que vous respectiez l’ordre suivant : appel de la bibliothèque de jquery en premier, ensuite appel du script popper.js et enfin les extensions JavaScript de Bootstrap.

Voici en exemple l’appel de ces fichiers

    <script src="assets/jquery.min.js"></script>
    <script src="assets/popper.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>

Mais comme Bootstrap s’est octroyée comme mission de faciliter la vie à ses utilisateurs, il a regroupé dans le fichier bootstrap.bundle le script popper.js et les extensions JavaScript propres à Bootstrap.

Du coup, le code peut être allégé en ne faisant qu’appel à jquery et à bootstrap.bundle

<script src="assets/jquery.min.js"></script>
<script src="dist/js/bootstrap.bundle.min.js"></script>

Maintenant, nous pouvons passer à la conception de notre pop-up

Première Etape : Naissance et Structure d’un pop-up Bootstrap

L’implémentation d’un pop-up Bootstrap se fait en 3 étages. Au premier étage il nous faut définir la base du pop-up à l’aide de la classe .modal.

Au second étage, nous créons notre fenêtre modale à l’aide de la classe .modal-dialog

Et au troisième étage, nous incluons le conteneur au sein duquel les contenus de la fenêtre seront organisés. Ce conteneur se définit à l’aide de la classe .modal-content.

Traduisons en code ces 3 paragraphes

<div class="modal">
   	  <div class="modal-dialog">
   	    	     <div class="modal-content">
   	    		
   	    	     </div>
   	  </div>
</div>

Deuxième Etape : Organisation des contenus d’un pop-up Bootstrap

structuration d'un pop-up bootstrap

Pour que le contenu d’un composant soit proprement présenté aux utilisateurs, il faut que ce contenu soit bien structuré.  Ce qui rend la navigation  facile  à l’utilisateur.

Bootstrap conscient de cela propose un système de structuration pour ces pop-up qui sont des composants flexibles.

Ainsi, nous avons la possibilité d’organiser les contenus d’un pop-up Bootstrap comme ceci : présenter l’entête du pop-up, la partie principale c’est-à-dire le corps du pop-up et enfin le bas du pop-up.

L’entête se définit à l’aide de la classe .modal-header, le corps à l’aide de la classe .modal-body et le bas à l’aide de .modal-footer.

Exemple :

<div class="modal">
   	  <div class="modal-dialog">
   	    	     <div class="modal-content">
   	    		    <div class="modal-header">
   	    		           <p> Entête du pop-up </p>
   	    	            </div>
   	    		    <div class="modal-body">
   	    		           <p> Je suis un magnifique pop-up</p>
   	    	            </div>
   	    		    <div class="modal-footer">
   	    		           <p> Footer du pop-up</p>
   	    	            </div>
   	    	     </div>
   	  </div>
</div>

C’est bon le pop-up est créé, maintenant il nous faut le rendre visible sur la page.

Troisième Etape : Affichage d’un pop-up Bootstrap

Affichage d'un pop-up bootstrap
  • Affichage statique

Bootstrap par défaut définit une position fixe (position : fixed) et un non affichage (display : none) pour le composant pop-up.

Donc pour pouvoir afficher le résultat du pop-up que nous avons conçu, nous allons devoir changer les valeurs de ces deux propriétés CSS dans une feuille de style externe liée au projet.

.modal{
	display: block;
	position: relative;
}
Démo de notre pop-up

  • Apparition du pop-up lors d’un clic sur un bouton

Cette possibilité d’affichage permet de garder le pop-up invisible et de le rendre visible lors du  clic d’un lien ou d’un bouton.

Deux attributs essentiels permettent de spécifier à un bouton d’afficher un pop-up Bootstrap.

Le premier attribut est l’attribut data-toggle qui doit avoir pour valeur modal.

Le second attribut est l’attribut data-target qui a pour valeur un dièse suivit de la valeur de l’identifiant du pop-up.

Nous allons reprendre l’exemple de notre pop-up mais cette fois-ci en ajoutant un bouton qui permet de l’afficher

<!-- Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popup">
	  Afficher le pop-up
</button>

<!-- Pop-up -->
<div id="popup" class="modal">
   	  <div class="modal-dialog">
   	    	     <div class="modal-content">
   	    		    <div class="modal-header">
   	    		        <p> Entête du pop-up </p>
   	    	            </div>
   	    		    <div class="modal-body">
   	    		        <p> Je suis un magnifique pop-up</p>
   	    	            </div>
   	    		    <div class="modal-footer">
   	    		        <p> Footer du pop-up</p>
   	    	            </div>
   	    	     </div>
   	  </div>
</div>
Démo

L’utilisateur peut cliquer sur la partie grisée pour revenir sur la page, mais il est conseillé de proposer à l’utilisateur un bouton de fermeture sur le pop-up.

Pour concevoir un bouton de fermeture sur un pop-up, il suffit d’inclure l’attribut data-dismiss dans le bouton et de lui octroyer la valeur modal.

Nous allons reprendre notre précédent exemple et intégrer dans le bas du pop-up un bouton de fermeture.

<!-- Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popup">
	  Afficher le pop-up
</button>

<!-- Pop-up -->
<div id="popup" class="modal">
   	  <div class="modal-dialog">
   	    	     <div class="modal-content">
   	    		    <div class="modal-header">
   	    		         <p> Entête du pop-up </p>
   	    	            </div>
   	    		    <div class="modal-body">
   	    		         <p> Je suis un magnifique pop-up</p>
   	    	            </div>
   	    		    <div class="modal-footer">
   	    		       <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer le pop-up
                               </button>
   	    	            </div>
   	    	     </div>
   	  </div>
</div>
Démo



Le tutoriel est normalement terminé, mais je vous offre un bonus. Je vous montre comment centrer verticalement votre fenêtre modale sur la page.

Il vous faut juste inclure la classe .modal-dialog-centered au deuxième étage de votre pop-up.

Exemple :

<!-- Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#popup">
	  Afficher le pop-up
</button>

<!-- Pop-up -->
<div id="popup" class="modal">
   	  <div class="modal-dialog modal-dialog-centered">
   	    	     <div class="modal-content">
   	    		    <div class="modal-header">
   	    		         <p> Entête du pop-up </p>
   	    	            </div>
   	    		       <div class="modal-body">
   	    		         <p> Je suis un magnifique pop-up</p>
   	    	            </div>
   	    		       <div class="modal-footer">
   	    		         <p> Footer du pop-up</p>
   	    	            </div>
   	    	     </div>
   	  </div>
</div>
Démo



Maintenant, vous êtes bien équipés pour implémenter dans vos projets de magnifiques pop-up Bootstrap, mais aussi vous pouvez accéder à la documentation officielle de Bootstrap pour plus d’informations.

Partagez ce tutoriel avec vos amis par le biais des boutons de partages ci-dessous pour qu’eux aussi sachent comment créer des fenêtres modales dans une application web à l’aide de Bootstrap.

Laisser un commentaire