Afficher une Exit Popup

Afficher une Exit Popup : lorsqu'un utilisateur est prêt à quitter la page, afficher une popup

Language: Javascript

Catégorie : Modal & Popup

<script>

const mouseEvent = (e) => {
  if (!e.toElement && !e.relatedTarget) {
    document.removeEventListener('mouseout', mouseEvent);
    document.querySelector('[js-modal-element=exit]').style.display = 'flex';
  }
};

document.addEventListener('mouseout', mouseEvent);

</script>

Sommaire

Utiliser un LLM pour résumer ou expliquer ce script

Le script

Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Exit Popup -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/modal/exit.js"></script>

<script>

const mouseEvent = (e) => {
  if (!e.toElement && !e.relatedTarget) {
    document.removeEventListener('mouseout', mouseEvent);
    document.querySelector('[js-modal-element=exit]').style.display = 'flex';
  }
};

document.addEventListener('mouseout', mouseEvent);

</script>

Les attributes

Div - Identifier la Modal

Nom

js-modal-element

Valeur

exit

Ajouter l'attribute à votre modale component (qui comprennent le cotenu, l'overlay et le bouton de fermeture)

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto

Template

Code source du script

<script>

const mouseEvent = (e) => {
  if (!e.toElement && !e.relatedTarget) {
    document.removeEventListener('mouseout', mouseEvent);
    document.querySelector('[js-modal-element=exit]').style.display = 'flex';
  }
};

document.addEventListener('mouseout', mouseEvent);

</script>