jQuery - Remember if a timed popup has been activated after page refresh

Question

I have a page with a popup overlay containing a form, that appears automatically after 20 seconds or is shown via the click action on a div.

I need it to work so that when the page is refreshed after the form is sent, the timer for the overlay doesn't start again, also so that if the link for the overlay is clicked the timer doesn't continue - basically I need it to remember if it's been triggered so that the overlay is only ever triggered once.

The jquery for the functions is below:

//popup button click function
  $('#popup_launcher').click(function(){
    $('#overlay').show(1000);
         $('html, body').animate({scrollTop:0}, 'slow');
      return false;
 });

 //close button click function
  $('#close').click(function(){
    $('#overlay').hide(1000);
 });

// popup timer function - change last value eg 20000 (20 seconds) to set time in milliseconds
        setTimeout(function() {  
                $('#overlay').show(1000);
                $('html, body').animate({scrollTop:0}, 'slow');
}, 20000);

The page is being developed here (form submit not active yet): http://www.tjsmarketing.co.uk/testarea/newquotepage/mk2/template.php?id=75890701 Thanks for any help, Aaron.

Answer 1

I would use sessionStorage.

// on page load
sessionStorage.overlay = 0;

// on click
sessionStorage.overlay = 1;

// time triggers overlay
sessionStorage.overlay = 2;

To retrieve:

if(sessionStorage.overlay < 2){
    // load form magic
}

You can include some if else logic for 1 vs 0 if you want, I just kept it simple for example purposes.

This will retain across all refreshes. It should be noted that this works on IE8+, and all real browsers ... if you're shooting for IE6 compatibility it won't work out. For those lame people, you can write a separate script to detect on post back. To detect browser support:

if(window.sessionStorage){
    // do the above code
} else {
    // reference postback script
}

This should cover everyone.

Answer 2

$('#popup_launcher').one('click', (function(){
    $('#overlay').show(1000);
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
});

This will execute your click event only once and then remove itself.