Basic Javascript help

I’m making a popup. But wants the popup to show only one time after closing. So not every time go go to the same page or opens the website.

I lack the basics in Javascript but are working on it. But I hope and think this is easy job :slight_smile:

This is the code I have to work with.

<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>

$j(document).ready(function() {
    if(localStorage.getItem('popState') != 'shown'){
        $j("#popup").delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }

    $j('#popup-close, #popup').click(function(e) // You are clicking the close button
    {
        $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
}); 

And I understand that the scr is where the code is, but as Im using webflow I need the whole code in one, I guess. I have tried to test it out on codepen, but with no luck.

Hope someone can be of help :slight_smile:

1 Like

Anyone? :slight_smile:

Please, show us your CodePen full test.

:slight_smile: Wil do: http://codepen.io/kjellruben/pen/mOmePZ

Sorry, that was wrong I didn’t save the one I tried, I can see now :o

http://stackoverflow.com/questions/24189428/display-a-popup-only-once-per-user

Thats where I found the code

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

@LuckyScooby Thank you so much! That worked like a charm! :smiley:
I really appreciate it!

1 Like

Thanks for this! Dropping in a month and half later here and thrilled to be able to implement this with little trouble!

Cheers!

This is the exact issue I’ve been struggling with for weeks. I have no javascript knowledge and I’ve been trying like hell to copy/paste my way to a solution with no luck. What do you say LuckyScooby, would you mind helping me out with this?

If so, here’s the deal:
Website: www.marketinginnovators.com

Read-only link: https://preview.webflow.com/preview/marketinginnovators?preview=e275e683be4a45e11f6eafd19d6478da

Issue: I have a popup that slides in after a few seconds. That popup contains custom code that populates with a form from a third party vendor (Act-On). This popup is set to display:none but appears through the use of an interaction. Can I add some kind of jquery that will allow this popup to display only one time per unique visitor? I’m happy to pay you for your time if this becomes too difficult with a simple copy/paste. Just contact me directly.

Thanks!
Jason