How to display a load popup only once per user/session?

[Vika (Viktoria)]

Hey, I went through the forum & video tutorials & couldn’t find the answer to this question. I was following this tutorial - YouTube & simply changed the trigger to load.
The pop up appears every time I go to the home page. Is there a way to fix this?

Here is my public share link: https://preview.webflow.com/preview/komplique-sport?preview=892b24bfc4d441ac67eb251ab1feef21

[vincent (Vincent Bidaux)]

Hi I made a template for a popup using a jquery cookie.

Webflow Cookie Template - Webflow

You can clone it and see how it works. It’s set to display a popup once every 24h but you can modify the code to make it work differently.

[Vika (Viktoria)]

Thank you very much!!!
I’m sure it works, but I guess I have some styling that prevents it from working… could you please take a look?

Thanks in advance!

[vincent (Vincent Bidaux)]

What happens is the popup is display:none to begin with, and if the js script confirms his rule (“has visited within 24hr”), it does nothing, it lets the popup with the display:none attribute…

Then the Webflow Interaction you’ve set on the same element kicks in and gives it display:block

http://vincent.polenordstudio.fr/snap/7cfmw.jpg

So in order to apply an Interaction to the popup, avoid doing it on the element that the script uses to control the visibility of the popup. Affect the interaction to an element nested in it. The easiest way here, as you already have styling applied to the outer element, is to move the script instead. Drag a brand new div, put the whole popup inside of it, give it a new class name (.popup-container ie) and change the class name in the script.

[Vika (Viktoria)]

Hey! Thank you for your time! Unfortunately this code didn’t work for my case… not sure why, but I likely found this one:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {

  // Load cookie library
  $.getScript('https://cdn.rawgit.com/js-cookie/js-cookie/v2.1.2/src/js.cookie.js', function() {

    // If cookie found (already shown)
    if(Cookies.get('notice') !== undefined) {

      // Hide cookie notice (change jQuery selector to match your own)
      $('.modal-wrapper').remove();
    }

    // On button click
    $('.modal-wrapper').click(function() {
      // Calculate when you want to display the notice again (change 15 to number of minutes you want)
      var expireTime = new Date(new Date().getTime() + 60000 * 60 * 24 * 60);
      // Set this cookie
      Cookies.set('notice', 'shown', { expires: expireTime });
    });
  });

});
</script>

And by using a trial & error method, I got it to work when I put this code in Inside head tag and set my modal wrapper to block.

Anyways thanks a lot !!!