jQuery - 记住页面刷新后是否激活了定时弹出窗口

Question

我有一个带有弹出式覆盖的页面，其中包含一个表单，该表单会在 20 秒后自动出现，或者通过 div 上的单击操作显示。

我需要它来工作，以便在发送表单后刷新页面时，覆盖的计时器不会再次启动，因此如果单击覆盖的链接，计时器不会继续 -基本上我需要它记住它是否被触发，这样覆盖层只会被触发一次。

函数的jquery如下：

//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);

这里正在开发页面（表单提交尚未激活）： http://www.tjsmarketing.co.uk/testarea/newquotepage/mk2/template.php?id=75890701 谢谢你的帮助， 亚伦。

Answer 1

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

这将只执行一次您的点击事件，然后自行删除。

Answer 2

我会使用 sessionStorage。

// on page load
sessionStorage.overlay = 0;

// on click
sessionStorage.overlay = 1;

// time triggers overlay
sessionStorage.overlay = 2;

检索：

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

如果你愿意，你可以为 1 和 0 添加一些 if else 逻辑，我只是​​为了举例而保持简单。

这将在所有刷新中保留。应该注意的是，这适用于 IE8+ 和所有真正的浏览器......如果你正在为 IE6 兼容性而拍摄，它不会成功。对于那些跛脚的人，您可以编写一个单独的脚本来检测回发。检测浏览器支持：

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

这应该涵盖所有人。