Créer un Pop-up en JavaScript: Guide et Exemples Expliqués

Introduction aux fenêtres modales

En naviguant sur le Web, vous êtes sûrement déjà tombé sur une fenêtre pop-up (ou fenêtre modale). Il s’agit d’une petite fenêtre d’information qui se superpose à l’écran du site visité. Elle prend le pas sur le contenu de la page et requiert l’attention de l’utilisateur jusqu’à ce qu’elle soit fermée. Elles se ferment généralement lorsque l’utilisateur appuie sur la touche Échap de son clavier.

Il est important de noter qu’un usage abusif des pop-ups peut nuire à l’expérience utilisateur. Cependant, quand elles sont soigneusement placées, elles peuvent être des outils marketing efficaces. Elles sont souvent utilisées pour faire une offre promotionnelle, inviter à une inscription à une newsletter ou encore pour suggérer une prise de contact. L’affichage du pop-up dépend de l’objectif à atteindre : parfois au défilement de la page, parfois quand l’utilisateur se prépare à quitter la page. Grâce à JavaScript, vous avez la possibilité de programmer l’apparition de la pop-up en fonction de ces différents scénarios.

Comment afficher un pop-up lors du défilement de la page ?

Lorsque vous voulez qu’un pop-up s’affiche quand l’utilisateur fait défiler la page, il y a deux étapes à considérer :

1. La création de l’encart et son masquage avec HTML et CSS ;
2. L’activation de son affichage lorsque l’utilisateur fait défiler la page grâce au JavaScript.

Avec JavaScript, vous pouvez utiliser la méthode addEventListener pour l’événement scroll, qui indiquera qu’une action doit être faite lorsque le visiteur fait défiler la page. Ensuite, la méthode getElementById indiquera que l’encart doit s’afficher. Il est également indispensable d’offrir la possibilité à l’utilisateur de fermer le pop-up et d’éviter que la pop-up ne s’affiche de manière répétée.

1 – Créer la fenêtre modale 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 l’utilisateur fera défiler la page. HTML et CSS sont utilisés pour cela. Voici une illustration:

2 – Cacher la fenêtre pop-up avec CSS

Après la première étape, la pop-up est affichée et le fond de la page est grisé, comme indiqué par le CSS. Cependant, par défaut, la fenêtre pop-up doit être cachée et la page divisée en sections telles que le pop-up est identifié par le div HTML « popup ». Pour cacher la pop-up par défaut, vous pouvez utiliser la propriété CSS display et avec comme valeur none en la liant au div « popup ».

3 – Activer l’affichage du pop-up avec JavaScript

Après l’étape précédente, la page apparaît vierge et le visiteur ne constate aucun changement lorsqu’il la fait défiler. C’est à ce moment-là que JavaScript intervient pour assigner un comportement au div «popup», qui est masqué.

Le code à exécuter avec JavaScript sera le suivant :

1. Supposer que la pop-up n’a pas encore été affichée ;
2. Quand le visiteur fait défiler la page ;
3. Déclenchement d’un minuteur ;
4. Et l’affichage du pop-up après 3 secondes.

À la fin du script, le code JavaScript indiquera que la fonction d’affichage de la pop-up a été exécutée. Ceci évite d’afficher de nouveau le pop-up toutes les 3 secondes.

4 – Comment fermer le pop-up avec JavaScript ?

Après cette étape, il ne se passe rien lorsque l’utilisateur clique sur Fermer. Ici nous avons également besoin de JavaScript pour décrire le comportement de l’élément «popup-fermeture».

Il est également possible de mettre en place d’autres méthodes pour 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 échapper, par exemple.

Comment afficher un pop-up avant de quitter la page web ?

Une autre méthode répandue sur le web consiste à afficher un pop-up lorsque l’utilisateur s’apprête à quitter le site. Par exemple, s’il n’a pas terminé de remplir un formulaire, le pop-up peut être utile pour s’assurer que l’utilisateur n’a pas oublié de valider son formulaire. HTML et CSS sont utilisés pour créer la fenêtre pop-up et pour la masquer. JavaScript permet de définir le comportement du pop-up.

Le comportement à coder en JavaScript pour afficher un pop-up quand l’utilisateur quitte la page en laissant un formulaire incomplet est le suivant :

1. Partant du principe que le visiteur n’a pas encore confirmé qu’il souhaite quitter la page sans remplir le formulaire,
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.

Comment afficher un pop-up au clic ?

Les pop-ups peuvent aussi être utilisées pour afficher des messages personnalisés : « Merci pour votre inscription ! » lorsqu’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 lorsque l’utilisateur clique à un endroit précis. La méthode JavaScript alert permet d’ouvrir un pop-up qui affiche le message voulu. Voici une illustration :

Pour aller plus loin, vous pouvez explorer comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant un guide sur les expressions régulières (regex) ; ou encore découvrir le CMS de Djaboo.