Display A Popup Only Once Per User

Question

There have already been answers to this question but I am still unsure exactly how it works.

I am using the following HTML in my footer.php:

<div id="popup">     <div>         <div id="popup-close">X</div>             <h2>Content Goes Here</h2>     </div> </div> 

and the following Javascript:

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

Everything works great, but I want to only show the pop up once per user (maybe using the cookie thing all the forum posts go on about) but I do not know exactly how to incorporate it into the JS above.

I know that I will have to load the cookie JS in my footer with this:

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

But that is all I understand, can anyone tell me exactly how the JS/jQuery should look with the cookie stuff added?

Thanks

James

Answer 1

*Note : This will show popup once per browser as the data is stored in browser memory.

Try HTML localStorage.

Methods :

• localStorage.getItem('key');
• localStorage.setItem('key','value');

---

$j(document).ready(function() {     if(localStorage.getItem('popState') != 'shown'){         $j('#popup').delay(2000).fadeIn();         localStorage.setItem('popState','shown')     }      $j('#popup-close, #popup').click(function() // You are clicking the close button     {         $j('#popup').fadeOut(); // Now the pop up is hidden.     }); }); 

Working Demo

Answer 2

This example uses jquery-cookie

Check if the cookie exists and has not expired - if either of those fails, then show the popup and set the cookie (Semi pseudo code):

if($.cookie('popup') != 'seen'){     $.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.     $j("#popup").delay(2000).fadeIn();     $j('#popup-close').click(function(e) // You are clicking the close button         {         $j('#popup').fadeOut(); // Now the pop up is hiden.     });     $j('#popup').click(function(e)          {         $j('#popup').fadeOut();      }); };