一款非常实用的网站公告，界面精美，cookie记录，一天只出现一次。
起因是下载附件需到QQ小程序推广效果低，于是想采用全局弹窗，虽然这样的用户体验可能会差些，但是效果应该会好些，效果如下图：
页脚加入JS代码（访问一次便记录cookie，需要Ctrl + Shift + Delete 清理缓存调试）
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 = "jishusongshucom"; if($.cookie(COOKIE_NAME)) { $(".layer").hide(); $("#globalNotice").hide(); } else { var jishusongshucomH = $(window).height(); var jishusongshucomW = $(window).width(); $(".layer").show(); $("#globalNotice").css({ 'top': jishusongshucomH / 2 - $("#globalNotice").height() / 2, 'left': jishusongshucomW / 2 - $("#globalNotice").width() / 2 }); $("#globalNotice").slideDown(300, function() { setTimeout("closeGloableAd()", '300000'); }); $.cookie(COOKIE_NAME, "jishusongshucom", { path: '/', expires: 1 }); } }); function closeGlobalNotice() { $('#globalNotice').hide(); $('.layer').hide(); } function redirectUrlToActive() { $('#globalNotice').hide(); $('.layer').hide(); } </script> head标签内引入CSS代码
<link rel="stylesheet" href=".../css/notice.css">a { text-decoration: none!important } #globalNotice { max-width: 400px; flex-basis: 100%; margin: 0 auto; 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; position: fixed; display: none; margin: 0 auto; z-index: 10001 } .layer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; filter: alpha(opacity=50); opacity: .5; background: #000; z-index: 1000; display: none } #globalNotice #hero-img { width: 100%; height: 100px; background: #007bff } #globalNotice #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) } #globalNotice #profile-img img { width: 100%; background: #fff; border-radius: 50% } #globalNotice #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 } #globalNotice #content p { font-size: 18px; font-weight: 400; line-height: 1.4; color: #666; } #globalNotice #content a { color: #ccc; font-size: 14px; margin: 0 10px; transition: color .3s ease-in-out; -webkit-transition: color .3s ease-in-out } #globalNotice #content a:hover { color: #007bff } #globalNotice #content .btn { background: none repeat scroll 0 0 #1ba1e2; 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; padding: 6px 10% } #globalNotice #content .btn:hover, .yanshibtn:hover { background: none repeat scroll 0 0 #9b59b6; 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; padding: 8px 10% } 
