弹窗公告cookie记录弹窗代码

公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。

弹窗公告cookie记录

20240603023152994-QQ截图20240603023127

 

代码文件index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>弹窗公告</title>
		<link rel="stylesheet" href="css/style.css" />
		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
	</head>

	<body>
		<div class="popup">
			<div class="popup-header">
				<h3 class="popup-title">网站公告</h3></div>
			<div class="popup-main">
				<p>这是内容</p>
				<p class="popup-domain">
					<span>域名一</span>
					<strong>
				<a href="https://521cd.cn" target="_blank">yiluxb.cn</a>
				</strong>
				</p>
				<p class="popup-domain">
					<span>域名二</span>
					<strong>
						<a href="#" target="_blank">yiluxb.cn</a>
					</strong>
				</p>
				<p>这是内容</p>
			</div>
			<div class="popup-footer">
				<div class="popup-btn popup-close">好的,我知道了</div>
			</div>
		</div>
	</body>

</html>

css代码

html {
				-webkit-tap-highlight-color: transparent;
				-ms-text-size-adjust: 100%;
				-webkit-text-size-adjust: 100%;
				line-height: 1.6;
				font-size: 14px;
				-webkit-tap-highlight-color: transparent;
			}
			
			* {
				margin: 0;
				padding: 0;
			}
			
			a {
				text-decoration: none;
				color: #282828;
				outline: none;
			}
	/*	以上是公共类,源网站上有的可以注释掉	*/
			
			.popup-background {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 10;
			}
			
			.popup {
			    display: none;
				box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05), 0 1.5rem 2.2rem rgba(0, 0, 0, 0.1);
				overflow: hidden;
				padding: 0 30px;
				background: #fff;
				width: 350px;
				position: fixed;
				top: 50%;
				left: 50%;
				z-index: 999999;
				transform: translateX(-50%) translateY(-50%);
				margin: 0 auto;
				border-radius: 18px;
				box-sizing: border-box;
			}
			
			.popup::after {
				content: '';
				height: 150px;
				width: 120%;
				background: #fbeecd;
				position: absolute;
				bottom: -95px;
				left: -10%;
				z-index: -1;
				border-radius: 50%;
			}
			
			.popup-header {
				text-align: center;
				padding: 25px 0 10px;
			}
			
			.popup-title {
				position: relative;
				font-size: 20px;
				font-weight: 900;
				display: inline-block;
			}
			
			.popup-title::before {
				content: '';
				position: absolute;
				width: 100%;
				height: 15px;
				left: 0;
				background: #fbeecd;
				bottom: 3px;
				border-radius: 4px;
				transform: skewX(-15deg);
				z-index: -1;
			}
			
			.popup-main {
				padding-bottom: 10px;
			}
			
			.popup-main p {
				padding: 2px 0 0;
			}
			
			.popup-main p.popup-domain span {
				position: absolute;
				left: 0;
				top: -20px;
				font-size: 12px;
				background: #ffddd5;
				border-radius: 6px 6px 0 0;
				padding: 0 6px;
				height: 32px;
				line-height: 22px;
				color: #e50914;
				z-index: -1;
			}
			
			.popup-main p.popup-domain:nth-child(2) {
				margin-top: 45px;
			}
			
			.popup-main p.popup-domain {
				margin: 35px 0 25px;
				background: #f3f5f7;
				text-align: center;
				position: relative;
				border-radius: 10px;
				padding: 10px 0;
			}
			
			.popup-main p.popup-domain strong {
				font-size: 20px;
			}
			
			.popup-footer {
				padding: 10px 0 30px;
				text-align: center;
			}
			
			.popup-btn {
				position: relative;
				cursor: pointer;
				overflow: hidden;
				border-radius: 50px;
				font-weight: 700;
				padding: 0 30px;
				transition: box-shadow .2s ease;
				background: #e50914;
				color: #fff;
				background: linear-gradient(to right, #ff711f 0%, #e50914 100%);
				box-shadow: 0 10px 12px -4px rgba(229, 9, 20, 0.25);
				line-height: 40px;
				font-size: 14px;
				display: inline-block;
			}
			
			.popup-btn::after {
				content: '';
				height: 40px;
				width: 25px;
				background: #fff;
				position: absolute;
				top: 0;
				transform: skewX(-45deg);
				right: 115%;
				opacity: 0;
			}
			
			@media (max-width: 559px) {
				.popup {
					width: 82%;
					padding: 0 25px;
				}
			}

 

js代码

$(document).ready(function() {
  // 如果cookie不存在,显示弹窗和背景遮罩层
  if (!$.cookie('popupShown')) {
    $('body').append('<div class="popup-background"></div>'); // 插入背景遮罩层
    $('.popup-background').fadeIn();
    $('.popup').fadeIn();
  }

  // 点击关闭按钮时的处理
  $('.popup-close').click(function() {
    $('.popup-background').fadeOut(function() {
      $(this).remove(); // 移除背景遮罩层
    });
    $('.popup').fadeOut();
    $.cookie('popupShown', 'yes', { expires: 1, path: '/' }); // 设置cookie,有效期1天
  });
});

 

    温馨提示:本文最后更新于2024-06-03 02:37:32,某些文章具有时效性,若有错误或已失效,请在下方留言
    ©版权声明
    感谢您的阅读
    喜欢就支持一下吧
    点赞15赞赏 分享
    评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    夸夸
    还有吗!没看够!
    取消
    昵称表情代码图片

      暂无评论内容