JS通过设置cookie来控制弹出层，首次打开页面显示弹出层
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS通过设置cookie来控制弹出层，首次打开页面显示弹出层相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>JS通过设置cookie来控制弹出层，首次打开页面显示弹出层，刷新页面不再显示；关闭浏览器重新打开、清除缓存cookie显示。</title>
<link rel="stylesheet" href="static/css/global.css"/>
<style>
.infor-layer {
background: url(‘http://edu.csdn.net/static/images/otherlayer.png?150ac022a67‘) no-repeat top center;
width: 744px;
height: 407px;
position: fixed;
top: 50%;
left: 50%;
z-index: 9990;
margin-top: -203px;
margin-left: -372px;
display: none;
}
.infor-layer .sub-alltext{ width: 258px;
margin: 98px 0 0 210px;}
.infor-layer .sub-alltext h1 {
font-size: 24px;
color: #fff;
}
.infor-layer .sub-alltext p {
font-size: 16px;
line-height: 2;
margin-top: 10px;
color: #fff;
}
.infor-layer .layer-goto-btn {
background: url(‘http://edu.csdn.net/static/images/layer_other_btn.png?150ac022a65‘) no-repeat top center;
width: 225px;
height: 47px;
position: absolute;
bottom: 28px;
left: 50%;
display: inline-block;
margin-left: -163px;
}
.infor-layer .layer-goto-btn:hover {
background: url(‘http://edu.csdn.net/static/images/layer_other_btn_hover.png?150ac022a66‘) no-repeat top center;
width: 225px;
height: 47px;
}
.infor-layer .close {
width: 25px;
height: 25px;
border-radius: 25px;
color: #04774a;
position: absolute;
font-size: 26px;
top: 53px;
right: 282px;
display: block;
border: 2px solid #04774a;
text-align: center;
line-height: 20px;
}
.markes {
background: #000;
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
display: none;
}
</style>
<script type="text/javascript" src="jq.js"></script>
</head>
<body>
<div class="infor-layer">
<div class="sub-alltext">
<h1>讲师会员卡！</h1>
<p>拥有讲师会员卡，学习实惠又全面学习实惠又全面学习实惠又全面学习实惠又全面</p>
</div>
<a href="http://edu.csdn.net/vipCards" target="_blank" class="layer-goto-btn"></a>
<a href="" id="J_indexNoteClose" class="close">×</a>
</div>
<!--半透膜层-->
<div class="markes"></div>
<script>
$(function(){
var t = 1000;
var cname = "cname5574";
setTimeout(function(){
var v = getCookie(cname);
if(v==undefined){
$(".infor-layer").show();
$(".markes").height($(document.body).height()).show();
document.cookie = cname+"=1";
}
},t);
$("#J_indexNoteClose").on(‘click‘,function(event){
document.cookie = cname+"=1";
$(".markes").remove();
$(".infor-layer").remove();
event.stopPropagation();
event.preventDefault();
return false;
});
function getCookie(name){
var cookie = document.cookie;
var a = cookie.split("; ");
for(var j=0,m=a.length;j<m;j++){
var b = a[j].split("=");
if(b[0].toLowerCase()==name){
return b[1];
break;
}
}
}
});
</script>
</body>
</html>
以上是关于JS通过设置cookie来控制弹出层，首次打开页面显示弹出层的主要内容，如果未能解决你的问题，请参考以下文章