Javascript:弹出框,如果单击“不显示”,则不显示

时间:2016-04-12 05:17:19

标签: javascript jquery html css

很像杂志网站,通常会有一个弹出框,在访问时要求订阅。
我基本上有同样的事情,但我希望它不会出现一段时间,比如说一周,如果他们点击“不要显示”。

fid:https://jsfiddle.net/jzhang172/jh3L5kox/

window.onload=func1();

function func1(){
$('.pop-up').fadeIn();
}

$('.nope').click(function(){
$('.pop-up').fadeOut();
});
body,html{
  padding:0;
  margin:0;
}
*{
  box-sizing:border-box;
}
.overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:black;
}
.pop-up {
    height: 40vw;
    width: 40vw;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -20vw;
    margin-top: -20vw;
    background: rgba(255, 255, 255, 0.83);
    text-align: center;
    border:1px solid black;
        box-shadow: 1px 1px 39px 5px #584B4B;
}
.nope{
  text-decoration:underline;
  cursor:pointer;
  font-size:13px;
}
.pop-up{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">
<div class="pop-up">
  <h2>Subscribe to be Awesome</h2>
  <span class="nope">Don't be awesome</span>
  
</div>
</div>

1 个答案:

答案 0 :(得分:3)

您可以使用Cookie来显示/隐藏弹出窗口。

1-当用户点击关闭弹出窗口时设置一个cookie。

@Setter

2-在文档加载时获取cookie。如果您的cookie存在,请隐藏弹出窗口其他节目

$('.nope').click(function(){
 document.cookie="mycookie=my_cookie_value; expires=Thu, 28 Apr 2016 12:00:00 UTC; path=/"; 
 $('.pop-up').fadeOut();
});

每次浏览器加载时都需要检查cookie。用您的值替换变量和if条件。有关cookie的更多信息,请访问http://www.w3schools.com/js/js_cookies.asp