您的位置：首页 > Web前端 > JavaScript

JS通过设置cookie来控制弹出层，首次打开页面显示弹出层

2016-03-28 14:25 686 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航