CODEWITHSUNDEEP
javascriptjquerypopup
Bane
Bane

Reputation: 49

Display popup only once per visit

I want to show popup just once per session which expire after some time. Can someone help me?

function PopUp(){
    $('.home-popup').fadeIn(500);
}

setTimeout(function(){
  PopUp();
},1000); // 1000 to load it after 1 second from page load

$('.close-popup-btn').click(function() {
    $('.popup').fadeOut(300);
});

Upvotes: 3

Views: 19941

Answers (2)

oompahlumpa
oompahlumpa

Reputation: 503

You could use localstorage for this as well. To set a storage item: localStorage.setItem('myPopup','true'); and to check for it you could do something like this:

var poppy = localStorage.getItem('myPopup');

if(!poppy){
    function PopUp(){
        $('.home-popup').fadeIn(500);
    }

    setTimeout(function(){
        PopUp();
    },1000); // 1000 to load it after 1 second from page load

    $('.close-popup-btn').click(function() {
        $('.popup').fadeOut(300);
    });
    localStorage.setItem('myPopup','true');
}

Upvotes: 9

Antony
Antony

Reputation: 1273

I would set a cookie with the popupSent value on the first visit, and check if the cookie exists before calling the PopUp function. Here is a rough implementation with the cookie helper functions from here: Set cookie and get cookie with JavaScript

function PopUp(){
    $('.home-popup').fadeIn(500);
    createCookie('popup','1');
}
if(readCookie('popup')){
    // 1000 to load it after 1 second from page load
    setTimeout(PopUp,1000); 
}
$('.close-popup-btn').click(function() {
    $('.popup').fadeOut(300);
});

Upvotes: 3

Related Questions