Dans ce nouveau cours sur le Framework BootStrap 3, vous allez apprendre à créer des pop-ups modal.
Ce sont des pop-ups qui s’intègrent dans votre page, sans ouvrir de nouvelle fenêtre, c’est beaucoup plus sympa et moins envahissant.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer des pop-up modal avec le Framework BootStrap 3
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours toujours consacré au framework CSS BootStrap 3, vous allez apprendre à créer des pop-ups, pas les pop-ups anciennes générations qui ouvraient une nouvelle page ou un nouvel onglet, les pop-ups modal, ça s’appelle comme ça, les pop-ups modales, qui s’ouvrent dans la même page en mettant un fond, un masque grisé sur le texte de la page, à partir de simple classe CSS, c’est comme ça que fonctionne BootStrap 3, vous allez pouvoir créer des pop-ups dans vos pages Web toujours compatibles avec la majorités des navigateurs.
Les pop-ups
Votre site Internet fonctionnera très bien sur les Smartphones, les tablettes, les ordinateurs de bureau. Pour cela il suffit d’ajouter deux attributs, data-toggle=modal et data-target=#id ; l’id de votre pop-up sera dans une balise div. Avec il y aura le pop-up qui aura une balise div avec des attributs, le contenu de l’entête, la classe modal-header, une div avec la classe modale-body, et une div avec la classe modale-footer, tout simplement.
Vous allez voir dans l’exemple de code source vous avez un bouton que vous pouvez faire apparaître, le pop-up au chargement de la page, c’est vous qui voyez, data-toggle=modal sur le bouton avec data-target, avec l’id du pop-up et derrière vous avez trois balises div au moins, au minimum, ça dépend de la complexité HTML de votre pop-up avec les différentes classes CSS, c’est aussi simple que ça.
Ensuite, vous avez différentes options pour votre pop-up, avec l’attribut data-dismiss ça va vous permettre de fermer votre pop-up, soit pour ajouter un bouton fermer, ou une croix de fermeture, c’est comme vous voulez, là on a mis une croix de fermeture avec la classe CSS close, data-dismiss=modal et voilà donc croix de fermeture, dès que l’utilisateur appuie sur cette croix, ça va refermer le pop-up.
Vous avez l’attribut data-backdrop, vous savez, quand un pop-up apparait, il y a un voile grisé qui masque un peu le texte de votre page, si vous mettez l’attribut data-backdrop à false, le voile est supprimé, vous aurez le pop-up mais l’arrière-plan de votre page sera parfaitement lisible.
Ensuite, vous pouvez masquer le pop-up, l’utilisateur peut masquer le pop-up en appuyant sur la touche Echap, tout simplement. Si vous voulez empêcher cela, vous utilisez data-keyboard, vous le mettez à false, comme ça, l’utilisateur, quand il appuiera sur échappe, le pop-up restera toujours présent, parce que vous avez mis l’attribut data-keyboard à false.
Les pop-up – L’API JavaScript
Vous avez une API JavaScript qui va bien évidemment avec le pop-up, c’est beaucoup plus simple pour la contrôler, comme d’habitude $(« #id-popup ») l’id du pop-up avec la méthode modal, et vous pouvez lui passer plusieurs paramètres, backdrop c’est pour le voile, soit true, soit false, keyboard c’est la touche echap pour masquer le pop-up ou à false pour l’empêcher, et show ça permet d’afficher le pop-up directement, si vous mettez le code au bon endroit au changement de la page, je vais vous le montrer, ou false, le pop-up ne s’affiche pas.
Vous pouvez envoyer l’option show pour afficher le pop-up, hide pour le masquer, toggle se sera un effet affichage du pop-up, masquage du pop-up.
Exemple d’application
On voit ensemble un exemple de code source, vous allez voir c’est relativement simple.
Alors comment on fait apparaître le pop-up au démarrage, document ready, c’est une fonction qui est appelée dès que le DOM est prêt, on appelle id popup, le pop-up s’appelle id, id-popup, et donc modal show, dès que la page se charge, le pop-up apparaît, et donc comment on fait le pop-up ?
Je le masque, je peux appuyer sur Echap, vous avez un bouton data-toggle l’attribut à modal et data-target # id-popup, tout simplement. Dès que je clique ici, ça affiche le pop-up avec un petit effet d’apparition, il y a toujours la croix de fermeture je vous montre donc la croix de fermeture, comment elle fonctionne ? C’est avec l’attribut data-dismiss = modal pour fermer le pop-up et la classe close, par faire une petite croix avec un affichage correct.
Et ensuite vous avez le titre du pop-up ici, « Bienvenu sur Développement Facile », je vais le mettre un peu plus petit, comme ça vous allez pouvoir voir le code source en même temps que le pop-up, lead c’est pour la description, cette classe lead j’en ai déjà parlé au moins trois fois dans trois cours différents, je vous invite à regarder les cours précédents, pour comprendre le principe de mettre une image avec l’option pull-left, donc c’est expliqué, c’est pour un alignement à gauche, si je mets -right, l’alignement va bien évidemment changer, voilà, alignement à droite et vous avez votre texte, ensuite un deuxième paragraphe, le deuxième paragraphe et le bouton qui est ici, je vais l’aligner à gauche, vous avez vu c’est super simple d’utiliser le framework BootStrap, je modifie en direct là, quand je fais la vidéo pour vous montrer la simplicité, l’alignement des boutons, l’alignement des images, la création, le contenu html du pop-up, si vous connaissez le code html, HTML 5, ou si vous avez suivi les cours sur développement facile, tout ça, c’est facile pour vous à créer, donc voilà comment on crée un pop-up, avec le framework BootStrap 3.
Votre plan d’actions !
Maintenant c’est vraiment à vous de jouer, vous retrouverez le code source sous cette vidéo, vous pouvez reprendre les éléments qui vous intéressent pour les mettre dans vos applications web, vous pouvez me poser vos questions que vous avez sur cours sous cette vidéo il y a un champ commentaires, allez-y c’est fait pour ça, et je vous invite dès maintenant à consulter la deuxième vidéo, à la fin de cette vidéo, il y a un lien qui va s’afficher, la vidéo deviendra cliquable, qui va vous rediriger automatiquement vers la deuxième vidéo, donc dans la deuxième vidéo vous allez apprendre comment aller plus loin avec le framework BootStrap 3, avec HTML 5, CSS 3, vous allez vraiment tout savoir je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle][/ppmaccordion]
Télécharge l’exemple de pop-up BootStrap 3
Retrouvez le code source commenté sur l’implémentation des pop-ups avec le Framework BootStrap 3
Téléchargement du code source Exemple de pop-up BootStrap 3
