代码说明

一款好看且非常适用的网页公告弹窗代码，使用jquery插件，cookie值记录，一天只弹一次，有喜欢的可自行引入到需要弹窗公告的主题模板文件中，一般为公共头部或公共底部文件。

演示截图

代码文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>弹窗公告-清风资源网</title>
<!--核心样式开始-->
<style>a{text-decoration:none!important}#globalAd,.layer{position:fixed;display:none}#globalAd{max-width:400px;flex-basis:100%;background:#fff;border-radius:10px;box-shadow:0 0 30px rgba(0,0,0,.3);-webkit-box-shadow:0 0 30px rgba(0,0,0,.3);overflow:hidden;margin:0 auto;z-index:10001}.layer{width:100%;height:100%;top:0;left:0;filter:alpha(opacity=50);opacity:.5;background:#000;z-index:1000}#globalAd #hero-img{width:100%;height:100px;background:#007bff}#globalAd #profile-img{width:80px;height:80px;margin:-80px auto 0;border:6px solid #fff;border-radius:50%;box-shadow:0 0 5px rgba(90,90,90,.3)}#globalAd #profile-img img{width:100%;background:#fff;border-radius:50%}#globalAd #content{text-align:center;width:320px;margin:0 auto;padding:0 0 50px}#container #content h1{font-size:29px;font-weight:500;margin:50px 0 0}#globalAd #content p{font-size:18px;font-weight:400;line-height:1.4;color:#666}#globalAd #content a{color:#ccc;font-size:14px;margin:0 10px;transition:color .3s ease-in-out;-webkit-transition:color .3s ease-in-out}#globalAd #content a:hover{color:#007bff}#globalAd #content .btn,#globalAd #content .btn:hover,.yanshibtn:hover{border:0;border-radius:2px;color:#fff!important;cursor:pointer;font-family:open sans,hiragino sans gb,microsoft yahei,wenquanyi micro hei,Arial,Verdana,Tahoma,sans-serif;font-size:14px}#globalAd #content .btn{background:0 0#1ba1e2;padding:6px 10%}#globalAd #content .btn:hover,.yanshibtn:hover{background:0 0#9b59b6;padding:8px 10%}</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--核心样式结束-->
</head>
<body>
<div class="layer"></div>
<div id="globalAd">
<div id='hero-img' style="background-color: #1a95ff;background: linear-gradient(to left, #5dadf3 0, #4583ca 100%);">
</div>
<div id='profile-img'>
<!--头像图片地址-->
<img src="http://img.wxcha.com/m00/f0/f5/5e3999ad5a8d62188ac5ba8ca32e058f.jpg" />
</div>
<div id='content'>
<!--公告修改区域-->
<p style="font-size: 16px;font-weight: bold;">网站公告</p>
<p>一款弹窗公告源码</p>
<p>使用cookie记录</p>
<p>一天只弹一次</p>
<p>清风资源网 www.mcoxn.com</p>
<a onclick="closeGlobalAd();" class="btn btn-default" rel='nofollow'>朕已阅</a>
<a href="https://www.mcoxn.com" onclick="redirectUrlToActive();" class="btn btn-default" rel='nofollow'>清风资源网</a>
<!--公告修改区域-->
</div>
</div>
<!--核心脚本参数-->
<script>
jQuery.cookie = function(name, value, options) {
if(typeof value != 'undefined') {
options = options || {};
if(value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if(options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if(typeof options.expires == 'number') {
date = new Date();
var totalTime = 24 * 3600;
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var pastTime = 3600 * hour + 60 * minutes + seconds;
var leftTime = totalTime - pastTime;
date.setTime(date.getTime() + (options.expires * leftTime * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else {
var cookieValue = null;
if(document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for(var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if(cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
$(function() {
var COOKIE_NAME = "erdangjiade";
if($.cookie(COOKIE_NAME)) {
$(".layer").hide();
$("#globalAd").hide();
} else {
var erdangjiadeH = $(window).height();
var erdangjiadeW = $(window).width();
$(".layer").show();
$("#globalAd").css({
'top': erdangjiadeH / 2 - $("#globalAd").height() / 2,
'left': erdangjiadeW / 2 - $("#globalAd").width() / 2
});
$("#globalAd").slideDown(300, function() {
setTimeout("closeGloableAd()", '300000');
});
$.cookie(COOKIE_NAME, "erdangjiade", {
path: '/',
expires: 1
});
}
});

function closeGlobalAd() {
$('#globalAd').hide();
$('.layer').hide();

}

function redirectUrlToActive() {
$('#globalAd').hide();
$('.layer').hide();
}
</script>
</body>
</html>
 
  • 本站名称：清风资源网
  • 本站永久地址：www.mcoxn.com
  • 本站提供的源码、模板、插件等等其他资源，除资源本身问题外，都不包含免费技术服务，请大家谅解！
  • 本站资源解压密码一般都为www.mcoxn.com如发现链接失效，请联系在线客服更新。
  • 本站所有代码模板仅供学习交流使用，请勿用于商业用途，及违法侵权行为使用均与本站无关。
  • 源码素材属于虚拟商品，具有可复制性，可传播性，一旦授予，不接受任何形式的退款、换货要求。
  • 本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
  • 本站所有资源来源于公开互联网搜集和网友投稿提供，仅供个人学习研究使用，若本站收录的内容对您的版权或者利益造成损害，请提供相应的资质证明发邮件至kakbga@qq.com我们将于3个工作日内予以删除。