事件代码 ·

美化版网站自定义弹窗公告小事件代码

美化版网站自定义弹窗公告

先言:

  • 上次小编分享了一个自适应的弹窗公告.
  • 后来发现很多网站都有这种面板的.
  • 这次给你们带来一款我美化过的新版本弹窗公告.
  • 旧版的弹窗公告直连传送门:

使用教程:

  • 将下列代码文件 .head 中的代码放入<head></head>标签之间.
  • 在将下列代码文件 .body 中的代码放入<body></body>标签之间.
  • 最后将 css 和 js 和 images 文件放在网站根目录即可.

代码文件:

.head
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/tc.css" />
<script src="js/jquery-3.1.1.min.js"></script>
.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="images/yunmge.jpg" /><!--图片链接-->
			</div>
			<div id='content'>
				<p style="font-size: 16px;font-weight: bold;">自定义弹窗</p>
				<p>云萌阁分享网提示你</p>
				<p>此弹窗使用cookie记录</p>
				<p>一天只弹一次</p>
				<a onclick="closeGlobalAd();" class="btn btn-default" rel='nofollow'>好的</a>
				<a href="https://www.yunmge.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>
css、js和images文件已打包在压缩包里面.

产品展示:

美化版网站自定义弹窗公告小事件代码 事件代码 第1张

演示站点:

温馨提示:

本站资源全部来源于网络!若有侵权请发送相关内容至ymg@yunmge.com邮箱反馈,欢迎大家发邮箱留言想要的作品,我们会在往后的日子里进行更新!

相关下载

点击下载