1

Hello I am trying to get the correct answer to a jquery question. I have looked on this site and saw some examples but all I have tried do not work. I have this jquery pop up box and I am trying to have the popup first load with a timer (this I have working). However, most importantly I would like to have the popup only appear once per session. by this I mean if someone visits the site twice or if they click the "x" to close the popup the cookies will prevent the popup from displaying. Bellow is my code. Can someone help?

<!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>
4

2 回答 2

0

您正在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。

于 2013-09-25T19:31:06.137 回答
0

不要只是在超时时打开一个框，而是先检查 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);
    });
}
于 2013-09-25T19:32:37.023 回答