wordpress主题网站添加精美通知弹窗教程

wordpress网站精美通知弹窗，一款非常实用的网站公告，界面精美，cookie记录，一天只出现一次。

起因是下载附件需到QQ小程序推广效果低，于是想采用全局弹窗，虽然这样的用户体验可能会差些，但是效果应该会好些。

效果如下图：

使用方法很简单：HTML + JS + CSS

在body标签内插入代码（如果是WordPress，可加一些php函数）

<div class="layer"></div><!--灰色遮罩，不需要可删去-->
<div id="globalNotice">
    <div id='hero-img' style="background-color: #1a95ff;background: linear-gradient(to left, #5dadf3 0, #4583ca 100%);">
    </div>
    <div id='profile-img'>
        <img src="https://img.szfx.top/img/2021/ssxtx.png" /><!--图片地址自行更换-->
    </div>
    <div id='content'>
        <p style="font-size: 16px;font-weight: bold;">菜鸟站长之家公告</p>				
        <p style="font-size: 14px;">站长屋VPS最新公告！还有加入QQ群</p>
        <img style="width:50%;margin:auto" src="https://www.zzwvps.com/qun.png"/><br><br><!--图片地址自行更换-->
        <a onClick="closeGlobalNotice();" class="btn btn-default" rel='nofollow'>朕已阅</a>
        <?php if(wp_is_mobile()){ ?>
            <a href="https://jq.qq.com/?_wv=1027&k=pw6qN8ne" onClick="redirectUrlToActive();" class="btn btn-default" rel='nofollow'>去瞧瞧</a>
        <?php } ?> 
        <?php if(!wp_is_mobile()){ ?>
            <a href="https://www.zzwvps.com" target="_blank" onClick="redirectUrlToActive();" class="btn btn-default" rel='nofollow'>去瞧瞧</a>
        <?php } ?> 
    </div>
</div>

页脚加入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">

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%
}

保存刷新去试试效果，要注意更改代码里面的网址。