Question

当用户进入我的产品页面时，我目前有一个工作弹出窗口，为他们提供有关如何浏览页面的一些提示。我试图每个用户只显示一次弹出窗口。我知道我可以设置一个jQuery cookie来帮助我做到这一点。

这就是我现在所拥有的：

我的页面标题中包含这些链接：

<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

这是我的身体：

<div class="container">
    <div id="overlay-back"></div>
    <div id="popup">
        <img src="Assets/images/Deep_Close.png" class="close-image" />
        <h1>Reminder</h1>
        <h3>Please Click On Any Image To View More Information</h3>
    </div>
</div>

这是我的CSS：

#popup{
position:absolute;
display:hidden;
top:160px;
width:350px;
height:auto;
background-color:white;
z-index:6;
padding:20px;
border:solid 5px #333333;
border-radius:5px;
}
#popup h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#3F5C9A;
border-bottom:1px #3F5C9A solid;
margin:0;
padding:0;
}
#popup h3{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#666666;
margin:0;
padding:5px 0;
text-align:left;
}
#overlay-back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-15px;
right: -15px;
height: 20px;
}

我需要做的是编辑这个脚本，每个用户只显示一次弹出窗口，这是脚本。

<script>
  $(document).ready(function(){
     $('#overlay-back').fadeIn(500,function(){
        $('#popup').show();
     });

     $(".close-image").on('click', function() {
        $('#popup').hide();
        $('#overlay-back').fadeOut(500);
     });
  });
</script>

Answer 1

你可以jQuery Cookie。

if( $.cookie("alreadyShownToUser") === undefined ){

    $('#overlay-back').fadeIn(500,function(){
        $('#popup').show();
    });

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

编辑我的脚本并添加一个jQuery cookie以仅显示一次弹出窗口

1 个答案: