Basic Javascript help

Design help Custom code
6

Well, you were on the right path.

This is the final script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    if(localStorage.getItem('popupState') != 'shown'){
        $(".popup").delay(2000).fadeIn();
        localStorage.setItem('popupState','shown')
    }

    $(".popup-close").click(function(){ // You are clicking the close button
        $('.popup').fadeOut(); // Now the popup is hidden.
    });
});
</script>

You just need to put that before closing body (custom code, in Webflow).
Note that I have changed the selectors from ids to classes, so in Webflow you just need to create and assign those classes to the corresponding divs.

And don’t forget to set the popup div to display:none, or the localStorage condition check won’t have any effect.

Also I have set position:fixed for the popup, so when it fades in or out it does not cause a change on the layout behind it (the actual website).

This is my working example:
http://fundyrio.webflow.io/popup

You can easily test local storage and cookies in private browsing windows (incognito, in Chrome) since they are wiped when you end the session.

4 Likes