Question

您好我正在尝试获得jquery问题的正确答案。我看过这个网站，看到了一些例子，但我尝试过的都不行。我有这个jquery弹出框，我试图让弹出窗口首先加载一个计时器（我已经工作了）。但是，最重要的是我希望弹出窗口每个会话只出现一次。我的意思是，如果有人访问该网站两次，或者如果他们点击“x”关闭弹出窗口，则cookie将阻止弹出窗口显示。贝娄是我的代码。有人可以帮忙吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<title>Cookies</title>
<style type="text/css">

body {
font-family: Arial, Helvetica, sans-serif;  
}

.backdrop {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .0;
filter: alpha(opacity=0);
z-index:50;
display:none;   
}

.box {
position: absolute;
top: 20%;
left: 30%;
width: 500px;
height: 300px;
overflow-y: scroll;
background: #fff;
z-index: 51;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #444444;
-webkit-box-shadow: 0px 0px 5px #444444;
box-shadow: 0px 0px 5px #444444;
display: none;  
}

.close {
float: right;
margin-right: 6px;
cursor: pointer;
}

</style>
<script type="text/javascript">
$(document).ready(function() {

//This function open the box after 10 seconds.  
setTimeout(function(){
$('.lightbox').ready(function(){
            $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block')
});
},10000);   

//This function closes the box
$('.close').click(function(){
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none')
});
});

$('.close').click(function(){
            close_box();

});

$('.backdrop').click(function(){
            close_box();
});
});

function close_box(){

$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none')

if($.cookie("lightbox") != 'true') {
 $(".box").hide().trigger('click');
$.cookie("lightbox", "true", { path: '/', expires: null });  
    }
  });
}

</script>
</head>

<body>
<div class="backdrop"></div>
<div class="box"><div class="close">X</div>
      Light box</div>

</body>
</body>
</html>

Answer 1

您正在close_box函数中设置Cookie，但您没有在代码中的任何其他地方测试该Cookie。

    //This function open the box after 10 seconds. 
   if ($.cookie("lightbox") != 'true') { 
     setTimeout(function () {
        $('.lightbox').ready(function () {
            $('.backdrop, .box').animate({
                'opacity': '.50'
            }, 300, 'linear');
            $('.box').animate({
                'opacity': '1.00'
            }, 300, 'linear');
            $('.backdrop, .box').css('display', 'block')
        });
       }, 10000);
    }

如果Cookie设置为true，这应该可以防止盒子打开。

Answer 2

不要只是在超时时打开一个框，而是先检查一下cookie：

// global timer variable 
var g_Timer;

// check popup already showed
  if ($.cookie("lightbox")  === null)
  {
    g_Timer = setTimeout(function () {
        $('.lightbox').ready(function () {
            $('.backdrop, .box').animate({
                'opacity': '.50'
            }, 300, 'linear');
            $('.box').animate({
                'opacity': '1.00'
            }, 300, 'linear');
            $('.backdrop, .box').css('display', 'block')
        });
    }, 10000);
  }

如果要卸载页面，请使用clearTimeout方法停止计时器：

$(window).on('unload', function() {
  clearTimeout(g_Timer);
});

然后你的关闭函数可能如下所示：

function close_box() {
    clearTimeout(g_Timer);

    $('.backdrop, .box').animate({
        'opacity': '0'
    }, 300, 'linear', function () {
        $('.backdrop, .box').css('display', 'none')
        $(".box").hide().trigger('click');

        $.cookie("lightbox", true);
    });
}

jQuery Cookie的麻烦弹出

2 个答案: