Les pop-up, ou « modales » sont des éléments quasi indispensables aujourd’hui dans le monde des sites internet et encore plus dans le webmarketing.

Dans ce tutoriel nous allons voir commencer créer deux types de pop-up : la première s’affichera deux secondes après que l’utilisateur aie effectué un scroll ; la seconde s’affichera quand l’utilisateur voudra quitter la page.

Pré-requis : Pour comprendre ce tutoriel, vous aurez besoin de connaître les bases des évènements de la modification DOM en JavaScript. Si ce n’est pas le cas, n’hésitez pas à demander de l’aide sur Codeur.com auprès d’un développeur Javascript freelance en déposant une annonce.

Afficher une pop-up après un scroll

On va commencer par créer et designer la pop-up. Elle sera composée d’une div principale, elle-même comportant une div qui fera office de fond et une div avec le contenu de la modale. Le contenu sera centré au milieu de l’écran grâce au positionnement fixe. Il est possible d’utiliser aussi du flex.

À noter aussi que la modale devra être masquée. Pour ce faire, on peut passer par une classe (ex: hidden), directement via le CSS. Au travers de l’exemple, nous allons utiliser la deuxième solution.

<div class="modal" id="modal">
  <div class="modal-back"></div>
  <div class="modal-container">
    Modale ici<br />
    <a href="#" id="modal-close">[fermer]</a>
  </div>
</div>
.modal {
  display: none;
}
.modal-back {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba( 0, 0, 0, .25 )
}
.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 25px;
  background: white;
  transform: translate(-50%, -50%)
}

Affichage de la pop-up

L’objectif est donc d’afficher la pop-up. Comme on l’a dit, nous avons décidé de passer par le CSS. Il s’agira donc, depuis le JavaScript, de sélectionner l’id modal et modifier son style.

document.getElementById('modal').style.display = 'block'

Il est préférable de jouer sur la prioriété style plutôt que css. En effet, la première va modifier de le style de l’élément sélectionné uniquement. La seconde met à jour le directement le css global, et donc affecte toutes les modales si vous en avec plusieurs  qui utilisent une même classe.

Actuellement, la modale s’affiche dès le chargement de la page. On veut qu’elle s’affiche que 2 secondes après avoir scrollé. Let’s go pour ajouter la condition.

window.addEventListener('scroll', function(e) {
  setTimeout( () => {
    document.getElementById('modal').style.display = 'block'
  }, 2000 )
});

Le problème que l’on a ce stade est que la modale va s’afficher à chaque fois que l’on scroll. Ce n’est pas très ergonomique, l’utilisateur ne va pas rester. C’est vraiment très simple à corriger : il suffit de rajouter une variable pour savoir si on a déjà déclenché l’affichage de la modale. Elle sera par défaut fausse (false). Lors du scroll, on va vérifier si l’état de la variable. Si elle est à false, c’est que la modale n’a pas encore été affichée, on va donc pouvoir l’afficher. Attention, il ne faut pas oublier de mettre à jour la variable, sinon la modale continuera à l’afficher en boucle.

let modalAlreadyShowed = false

window.addEventListener('scroll', function(e) {
  if( ! modalAlreadyShowed ) {
    setTimeout( () => {
      document.getElementById('modal').style.display = 'block'
    }, 2000 )
    modalAlreadyShowed = true
  }
});

Fermer la pop-up

Afficher la fenêtre, c’est bien. Mais si on ne peut la fermer, c’est moyen.

Il y a quatre solutions, elles peuvent toutes être cumulées :

  • un bouton à cliquer, généralement en bas de la modale,
  • une croix, généralement en haut à droite,
  • cliquer dans la zone noire,
  • appuyer sur le bouton Echap.

Ici, nous allons nous contenter du premier point.

document.getElementById('modal-close').addEventListener('click', function(e) {
  document.getElementById('modal').style.display = 'none'
})

Résultat

Voici le lien vers l’exemple complet.

À vous d’améliorer cette pop-up comme bon vous semble, avec du HTML, CSS et du JavaScript.

 

Confirmer la fermeture de la page

Maintenant, on va souhaiter demander la confirmation à l’utilisateur quand ce dernier fermer la page. S’il confirme, alors la page se ferme bien ; sinon, on reste dessus.

Afin d’éviter de passer pour un site de spam, on ne va pas afficher le message dans tous les cas de figure, mais seulement quand l’utilisateur a effectué des modifications dans un champ présent sur la page.

On va pouvoir créer notre champ ou nos champs.

<input type="text" id="input" />

Tout comme la pop-up précédente, on va créer une variable qui servira à savoir s’il y a eu des modifications ou non. Puis, dès que le champ est modifié, on va pouvoir mettre à jour le contenu de cette variable.

var confirmExiting = false

document.getElementById('input').addEventListener('input', function(e) {
  confirmExiting = true
})

Maintenant, on va pouvoir placer le code qui permettra de ne pas fermer la page sans une confirmation. Le code est strict. En le modifiant un peu, cela peut ne pas fonctionner sur certains navigateurs.

window.addEventListener('beforeunload', function (e) {
  if( confirmExiting ) {
    e.preventDefault();
    e.returnValue = '';
  }
});

Vous pouvez accéder à un exemple complet ici-même.

 

Notre astuce pour créer des pop-up en JavaScript

Vous savez maintenant afficher deux pop-up grâce à JavaScript : une après un scroll sur la page de l’utilisateur et une avant qu’il ne ferme la page.

Bien évidemment, il existe beaucoup d’autres sortes de pop-up : pour effectuer des modifications, afficher du contenu complémentaire ou encore pour se connecter.

Si d’aventure vous avez besoin de soutien pour concevoir vos modales, vous pouvez recruter un développeur freelance spécialisé en JavaScript sur Codeur.com en déposant une annonce gratuitement.