fbpx
contact@bootstrap-top-design.com

3 simples étapes à suivre pour réaliser un popup Bootstrap

pop-up bootstrap

Un popup Bootstrap, qu’est-ce que c’est? A quoi sert il? Et surtout comment l’implémenter dans un projet web?

Le popup Bootstrap est cette petite fenêtre conçue à l’aide de la librairie Bootstrap qui se superpose sur une page web après avoir mis un masque grisé sur celle-ci à l’exemple de la newsletter de mon site.

Ses emplois sont multiples, il peut être utilisé pour présenter de l’information, afficher des messages publicitaires ou encore, inciter l’utilisateur à entrer des données.

Sa conception est simple, vous découvrirez dans les lignes qui suivent comment vous y prendre en trois simples étapes.

Vous saurez désormais comment créer et intégrer dans vos projets, de magnifiques popup Bootstrap  qui affichent un avertissement à l’utilisateur, ou encore qui récoltent les informations de l’utilisateur pour réaliser une opération.

Pré requis Pour un Popup Bootstrap:

Le popup 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 popup

Première Etape : Structure de base d’un popup Bootstrap

L’implémentation d’un popup 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 popup 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 popup 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 du popup

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



Vous pouvez accéder à la documentation officielle de Bootstrap pour plus d’informations. Maintenant, vous êtes bien équipés pour implémenter dans vos projets de magnifiques popup Bootstrap pour présenter des avertissements, ou récolter des informations à l’aide d’un formulaire intégré dans le popup.

A propos d’un formulaire, ce tutoriel vous montre comment le concevoir proprement à l’aide de Bootstrap.

Partagez ce tutoriel avec vos amis par le biais des boutons de partages ci-dessous pour qu’ils sachent aussi comment créer une fenêtre modale Bootstrap dans une application web.

Laisser un commentaire