每次访问只显示弹出窗口一次

Question

我想在会话期间只显示一次弹出窗口，之后会过期。有人能帮助我吗？

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

- Bane

---

您是否希望弹出窗口能自动淡出？在这种情况下，您还可以在fadeIn上设置回调函数，以便在完成后发生淡出并在一定时间间隔后自动淡出。如果您希望确保在给定的会话期间弹出窗口不会继续弹出，则可以设置一个cookie。 - Snowmonkey

@Snowmonkey，我有一个弹出窗口的关闭按钮，但它不会自动关闭。如何设置cookie？能给一些例子吗？ - Bane

Answer 1

你也可以使用本地存储（localstorage）来实现此功能。设置一个存储项：localStorage.setItem('myPopup','true');，检查它的方法如下：

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');
}

- oompahlumpa

---

它没有过期时间。但是如果你想让它在用户关闭浏览器或标签时清除，你可以这样做：$(window).bind('beforeunload', function(){ localStorage.removeItem('myPopup'); }); - oompahlumpa

我个人在电子邮件收集弹出窗口中使用它，只希望我的用户看到一次。这样不会被轰炸，效果非常好。如果需要特定的过期日期，您将需要使用cookie。LocalStorage快速且易于使用。 - oompahlumpa

你知道或者有一些例子可以向我展示如何使用cookie实现这个功能吗？ - Bane

你的页面是用PHP编写的吗？ - oompahlumpa

实际上，可以参考下面Antony的帖子。他有一种非常简单的使用Javascript设置cookie的方法。 - oompahlumpa

Answer 2

在第一次访问时，我将设置一个具有“popupSent”值的cookie，并在调用“PopUp”函数之前检查该cookie是否存在。 下面是一个使用这里的cookie帮助函数的粗略实现： 使用JavaScript设置和获取cookie

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

- Antony