网站公告弹窗美化代码 适应任何站点-弹窗美化

推荐一款比较热门的一个弹窗公告代码，简洁的界面而又不失大气风范，通俗易懂的代码一个小白也能按照教程去安装，公告弹窗的工作原理是利用cookie记录，一天只弹一次窗，当然如果要一天两次也是可以做到的。

有三段代码使用方法很简单 分别是：HTML  + JS + CSS

在主题的文件里body标签内插入php代码（如果是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.buerds.com/wp-content/uploads/2021/11/153effb07e65.png" />
    </div>
    <div id='content'>
        <p style="font-size: 16px;font-weight: bold;">不二导师公告</p>				
        <p style="font-size: 14px;">QQ小程序发布啦！欢迎使用</p>
        <img style="width:50%;margin:auto" src="https://img.buerds.com/wp-content/uploads/2021/11/153effb07e65.png"/><br><br>
        <a onClick="closeGlobalNotice();" class="btn btn-default" rel='nofollow'>朕已阅</a>
        <?php if(wp_is_mobile()){ ?>
            <a href="https://img.buerds.com" onClick="redirectUrlToActive();" class="btn btn-default" rel='nofollow'>去瞧瞧</a>
        <?php } ?> 
        <?php if(!wp_is_mobile()){ ?>
            <a href="https://img.buerds.com" target="_blank" onClick="redirectUrlToActive();" class="btn btn-default" rel='nofollow'>去瞧瞧</a>
        <?php } ?> 
    </div>
</div>

在主题的文件里页脚加入JS代码（访问一次便记录cookie，需要Ctrl + Shift + Delete 清理缓存调试)

<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 = "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代码（这样一套流程就下来了。去试下效果吧，记得Ctrl + shift + Delete清理缓存调试）

------本页内容已结束，喜欢请分享------