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

当前，当用户进入我的产品页面时，我会弹出一个可用的弹出窗口，向他们提供有关如何导航页面的提示。我正在尝试为每个用户只显示一次弹出窗口。我知道我可以设置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>

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

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

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

$（文档）.ready（函数（）{
$（'#overlay back'）.fadeIn（500，function（）{
$（'弹出窗口'）.show（）；
});
$（“.close image”）。在（'click'，function（）上{
$（'弹出'）.hide（）；
$（“#叠加回”）.fadeOut（500）；
});
});

你可以自己动手

---

你真的试过什么吗？

#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>

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

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

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