wordpress网站添加精美通知弹窗

一款非常实用的网站公告,界面精美,cookie记录,一天只出现一次。

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

wordpress网站添加精美通知弹窗,分享,百度,建站,代码,WordPress,技术,js代码,js教程,第1张

使用方法很简单: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;">小君博客最新公告!还有加入QQ群</p>         <img style="width:50%;margin:auto" src="http://aihaoz.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.ixiaojun.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">
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% } 

相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注