Comment utiliser jQuery pour générer une pop-up modale lorsqu’on clique dessus

Comment utiliser jQuery pour générer une pop-up modale lorsqu’on clique dessus

Une boîte modale est une fenêtre pop-up qui oblige l’utilisateur à interagir avec elle avant de retourner sur le site. Les boîtes modales sont utiles pour les avertissements, les boîtes d’information, et plus encore. Vous pouvez créer une boîte modale avec jQuery. Si vous n’êtes pas familier avec jQuery, consultez notre article sur les bases de jQuery pour une explication du fonctionnement de jQuery.

C’est un affichage de code interactif qui vous montre le HTML, le CSS, jQuery, et une démo du résultat.

Modal HTML

Pour créer une pop-up modale, vous devez d’abord établir la structure HTML.

Vous devez créer des classes pour le recouvrement de la pop-up et le contenu de la pop-up afin de pouvoir les modifier séparément du reste du document.

Cet exemple crée les classes « popup-overlay » et « popup-content » pour permettre à CSS de le styliser spécifiquement.

Prenez note des éléments de bouton dans cet exemple. Nous avons ajouté des boutons dont nous voulons qu’ils déclenchent la pop-up. Un bouton a reçu la classe « open », tandis que l’autre a la classe « close ». Ils seront utilisés plus tard pour ouvrir et fermer la pop-up.

Modal CSS

Dans le CSS, vous devez styliser les classes « popup-overlay » et « popup-content » pour qu’elles soient initialement cachées. Une pop-up ne serait pas une pop-up si elle était visible dès le début. Nous pouvons cacher la pop-up en modifiant la visibilité des classes :

.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}

Maintenant, nous ne voulons pas que la popup soit cachée pour toujours, donc nous devons faire un cas d’utilisation spécial dans le CSS pour savoir quand la popup doit être affichée. Nous allons utiliser jQuery pour aider à déterminer quand la pop-up doit être visible.

JQuery a la capacité d’ajouter et de supprimer des classes basées sur des actions (comme cliquer). Ainsi, si nous programmons le jQuery pour ajouter une classe appelée « active » lorsque le bouton « ouvrir » est cliqué, nous pouvons utiliser la classe « active » dans le CSS pour afficher la pop-up. Ajoutez la classe « active » aux classes de pop-up et créez un nouveau style pour le moment où la pop-up est visible.

Voyez l’exemple ci-dessous pour voir à quoi devrait ressembler ce style CSS :

.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}

Modal jQuery

Maintenant, il est temps d’ajouter le jQuery. Assurez-vous de configurer votre document HTML pour jQuery avant d’ajouter tout code jQuery. Si vous ne savez pas comment faire, consultez notre article Préparer votre HTML pour jQuery.

Alors, lorsque les boutons HTML « Ouvrir » et « Fermer » sont cliqués, jQuery doit ajouter ou supprimer la classe « active ».

Cette première déclaration ajoute la classe « active » lorsque le bouton « Ouvrir » est cliqué.

$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});

Lorsque cela se produit, la classe « active » est ajoutée aux classes de pop-up, changeant ainsi la visibilité de la pop-up en « visible ». En d’autres termes, la pop-up apparaîtra.

Cette deuxième déclaration supprime la classe « active » lorsque le bouton « Fermer » est cliqué.

$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});

Lorsque cela se produit, la classe « active » est supprimée des classes de pop-up, ce qui les fait revenir à leur style précédent qui a la visibilité définie sur caché.

Ajouter les deux déclarations de jQuery à votre document. Si tout cela est complété correctement, vous aurez une boîte pop-up modale rudimentaire.