Comment faire un pop-up en JavaScript : guide et exemples

Le pop-up, ou fenêtre modale, est un encart qui se superpose au contenu de la page web active, lorsque l'internaute effectue une action déterminée. Le pop-up prend le contrôle, c'est-à-dire que le visiteur du site ne peut pas agir sur la page web active tant que l'encart reste affiché à l'écran. Par usage, la touche esc permet de fermer la fenêtre.

Multiplier les fenêtres pop-up sur un site web nuit à l'expérience utilisateur. Le pop-up toutefois est opportun à certaines étapes de navigation, car il attire efficacement l'attention des visiteurs. Diffuser une offre promotionnelle, proposer de s'inscrire à la newsletter ou encore suggérer une prise de contact : les fenêtres modales sont notamment utilisées à ces fins marketing et commerciales. Le pop-up, selon son objectif, s'affiche au défilement d'une page web ou lorsque l'internaute s'apprête à quitter la page. JavaScript permet de programmer ce type de pop-up.

Afficher un pop-up lors du défilement

En programmation web, afficher une fenêtre modale lorsque le visiteur fait défiler la page web vers le bas revient à :

1. Créer un encart et masquer son affichage, avec HTML et CSS.
2. Indiquer que l'encart doit s'afficher quand le visiteur fait défiler la page, grâce à JavaScript.

La méthode JavaScript addEventListener, avec l'évènement scroll, indique qu'il faut faire quelque chose quand le visiteur fait défiler la page. La méthode JavaScript getElementById permet d'indiquer ce qu'il faut faire : afficher l'encart.

Pour une bonne UX, il faut également permettre au visiteur de fermer le pop-up, et empêcher que le pop-up s'affiche de manière répétée.

1 - Créer la fenêtre pop-up avec HTML et CSS

La première étape consiste à créer la fenêtre, à lui appliquer un style, à la dimensionner et à la positionner telle qu'elle apparaîtra quand le visiteur fera défiler la page web. HTML et CSS sont utilisés pour cela. Illustration :

See the Pen creer-pop-up-html-css_pop-up-javascript by HubSpot France (@HubSpot-France) on CodePen.

2 - Masquer la fenêtre pop-up dans CSS

À l'étape précédente, la fenêtre pop-up est affichée et le fond de la page web est grisé, comme indiqué par CSS. Or par défaut, la fenêtre pop-up doit être masquée et la page doit s'afficher. Dans l'exemple, le pop-up est identifié par le div HTML « popup ». Pour masquer par défaut le pop-up, il faut utiliser la propriété CSS display avec la valeur none, appliquée au div « popup ».

See the Pen popup-display-none_pop-up-javascript by HubSpot France (@HubSpot-France) on CodePen.

3 - Afficher le pop-up avec JavaScript

À l'étape précédente, la page est vierge et il ne se passe rien quand le visiteur la fait défiler vers le bas. C'est JavaScript qui permet d'assigner un comportement au div « popup », qui pour le moment est masqué. Le comportement à coder en JavaScript est le suivant :

1. Partant du principe que le pop-up ne s'est pas encore affiché
2. Quand le visiteur fait défiler la page
3. Lancer un minuteur
4. Et afficher le pop-up au bout de 3 secondes

See the Pen afficher-popup-avec-javascript_pop-up-javascript by HubSpot France (@HubSpot-France) on CodePen.

À la fin du script, le code JavaScript indique que la fonction d'affichage du pop-up a été exécutée. C'est essentiel pour éviter d'afficher de nouveau le pop-up toutes les 3 secondes.

4 - Fermer le pop-up avec JavaScript

À l'étape précédente, il ne se passe rien lorsque le visiteur clique sur Fermer. Là encore, il faut utiliser JavaScript pour décrire le comportement de l'élément « popup-fermeture ».

See the Pen fermer-popup-javascript_pop-up-javascript by HubSpot France (@HubSpot-France) on CodePen.

D'autres méthodes permettent de fermer le pop-up : indiquer que la fenêtre se ferme lorsque le visiteur clique en-dehors du pop-up ou lorsqu'il utilise la commande escape, par exemple.

Afficher un pop-up avant de quitter la page web

Une autre pratique répandue sur le web consiste à afficher un pop-up lorsque le visiteur s'apprête à quitter le site. S'il n'a pas achevé de remplir un formulaire, par exemple, le pop-up est utile pour s'assurer que le visiteur n'a pas oublié de valider son formulaire. HTML et CSS sont utilisés en premier lieu pour créer la fenêtre pop-up et pour la masquer. JavaScript permet ensuite de décrire le comportement du pop-up.

Le comportement à coder en JavaScript pour afficher un pop-up quand le visiteur quitte la page en laissant un formulaire inachevé est le suivant :

1. Partant du principe que le visiteur n'a pas encore confirmé qu'il souhaitait abandonner son formulaire et quitter la page
2. Quand le visiteur est sur le point de quitter la page
3. Afficher le pop-up de demande de confirmation

La méthode JavaScript addEventListener, avec l'évènement beforeunload, indique qu'il faut faire quelque chose quand le visiteur est sur le point de quitter la page. La méthode JavaScript getElementById permet d'indiquer ce qu'il faut faire : afficher le pop-up.

Afficher un pop-up au clic

La fenêtre pop-up est également utilisée pour afficher des messages personnalisés : « Merci pour votre inscription ! » quand un visiteur valide son inscription à la newsletter, par exemple.

La méthode JavaScript addEventListener, avec l'évènement click, indique qu'il faut faire quelque chose quand le visiteur clique à l'endroit indiqué. La méthode alert en JavaScript permet d'ouvrir un pop-up qui affiche un message. Illustration :

See the Pen popup-clic_pop-up-javascript by HubSpot France (@HubSpot-France) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez le CMS de HubSpot.