利用cookies实现对弹出窗口频率的控制

原理:

当用户第一次访问网站时候,此时没有设置cookies参数,并且设置过期,弹出显示对话框,弹完之后,设置cookies参数”popped=yes;expires=”+date.toGMTString()”,第二次加载时候,判断存在这个参数,则跳过加载对话框,cookies失效后,浏览器会自动删除失效的参数

代码:

JS/css引入

<link rel=”stylesheet” href=”//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css”>
<script src=”//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=”//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js”></script>

JS函数

<script>
$(function() {
if (get_cookie(‘popped’)==”){
$(“#dialog-modal”).show();
$( “#dialog-modal” ).dialog({
height: 410,
width: 815,
modal: true
});

var date=new Date();
date.setTime(date.getTime()+12*60*60*1000); //设置date为当前时间+30分
document.cookie=”popped=yes;expires=”+date.toGMTString();

}else{
$(“#dialog-modal”).hide();
}
});

function get_cookie(Name) {
var search = Name + “=”
var returnvalue = “”;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(“;”, offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
</script>

DIV模块

<div id=”dialog-modal” title=”关注公众号(Java杂记),领取免费的学习资源,目前受益良多” style=”width: auto;min-height: 0px;max-height: none;height: 360px;display:none;”>
<p><img src=”http://www.liuhaihua.cn/wp-content/uploads/2018/07/888.png” data-baiduimageplus-ignore data-tag=”bdshare”/></p>
</div>

效果:

1531487326(1)

 

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 利用cookies实现对弹出窗口频率的控制

赞 (1)
分享到:更多 ()

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 酷特尔也可以利用session。 保存在服务器中。 客户端浏览器清理后依旧有效回复