1

こんにちは、jquery の質問に対する正しい答えを得ようとしています。このサイトを見て、いくつかの例を見ましたが、試したすべてが機能しません。私はこのjqueryポップアップボックスを持っていて、ポップアップをタイマーで最初にロードしようとしています(これは私が働いています)。ただし、最も重要なのは、ポップアップをセッションごとに 1 回だけ表示することです。つまり、誰かがサイトに 2 回アクセスした場合、または「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>
4

2 に答える 2

0

関数で Cookie を設定してclose_boxいますが、コードの他の場所でその 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 に答える