Construire une exit popup avec JavaScript

J’ai récemment construit un système qui affiche une fenêtre contextuelle aux utilisateurs lorsqu’ils sont sur le point de quitter un site. J’ai pensé partager mon approche et quelques astuces que j’ai apprises en cours de route. Je vais m’en tenir au JavaScript vanille pour le rendre aussi accessible que possible.

Avis de non-responsabilité : les fenêtres contextuelles de sortie peuvent ennuyer les utilisateurs, je vous recommande donc de les utiliser avec modération !

Balisage et style

C’est pas le sujet. Donc on va faire quelque chose de simple.

<div id="popup" class="popup__wrapper">
   <div class="popup_container">
     <h1 class="popup_title">Merci de votre visite !</h1>
     <p>Passez une merveilleuse journée 💁</p>
   </div>
</div>

Le popup__wrapper est une superposition transparente qui recouvre la page. Le popup_container enveloppera le contenu que nous aimerions afficher.

Voici le code CSS associé, la popup par défaut n’est pas visible à l’écran. C’est l’action de l’utilisateur de « quitter la page » qui déclenchera son affichage.

#popup {
  display: none;
}

.popup__wrapper {
  background: rgba(0, 0, 0, .75);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
}

.popup__container {
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  margin: 100px auto;
  max-width: 100%;
  padding: 20px;
  width: 500px;
}

.popup__title {
  font-size: 26px;
  margin-bottom: 15px;
}

Voici le CSS que j’ai utilisé :

Le plus important est display: none sur le sélecteur #popup : cela masque le contenu jusqu’à ce que nous voulions l’afficher.

Le javascript pour l’affichage de l’exit popup

Écrivons maintenant quelques lignes de JavaScript pour afficher le popup lorsque la souris quitte la fenêtre :

function onMouseOut(event) {
  // If the mouse is near the top of the window, show the popup
  // Also, do NOT trigger when hovering or clicking on selects
  if (
    event.clientY < 50 &&
    event.relatedTarget == null &&
    event.target.nodeName.toLowerCase() !== 'select') {
    // Remove this event listener
    document.removeEventListener("mouseout", onMouseOut);

    // Show the popup
    document.getElementById("popup").style.display = "block";
  }
}

document.addEventListener("mouseout", onMouseOut);

J’espère que ce post était informatif! S’il vous plaît laissez-moi savoir ce que vous pensez dans les commentaires ci-dessous, et bon codage!

Personnellement j’utilise ce code dans des e-commerces pour inciter les utilisateurs à valider leur panier !