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
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.
<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 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?
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.