Modal & Popup

Afficher une popup une fois par session

<script>
document.addEventListener('DOMContentLoaded', function () {
  const popupComponent = document.querySelector('.popup_component');

  const seenPopup = sessionStorage.getItem('seenPopup');

  if (!seenPopup) {
    setTimeout(() => {
      popupComponent.style.display = 'flex';
    }, 3000);

    sessionStorage.setItem('seenPopup', 1);
  } else {
    popupComponent.style.display = 'none';
  }
});
</script>

Etape 1 - Ajouter le script sur la page ou le projet Webflow

<script>
document.addEventListener('DOMContentLoaded', function () {
  const popupComponent = document.querySelector('.popup_component');

  const seenPopup = sessionStorage.getItem('seenPopup');

  if (!seenPopup) {
    setTimeout(() => {
      popupComponent.style.display = 'flex';
    }, 3000);

    sessionStorage.setItem('seenPopup', 1);
  } else {
    popupComponent.style.display = 'none';
  }
});
</script>
Copier

Etape 2 - Ajouter les attributes correspondants

Tuto, template & scripts

<script>
document.addEventListener('DOMContentLoaded', function () {
  const popupComponent = document.querySelector('.popup_component');

  const seenPopup = sessionStorage.getItem('seenPopup');

  if (!seenPopup) {
    setTimeout(() => {
      popupComponent.style.display = 'flex';
    }, 3000);

    sessionStorage.setItem('seenPopup', 1);
  } else {
    popupComponent.style.display = 'none';
  }
});
</script>
Copier

Etape 2 - Ajuster le code pour votre besoin

  • Remplacer la class popup_component par la class wrapper de votre popup
Copié dans le presse-papiers
Logo Justa

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.