js如何实现开屏弹窗

最新推荐文章于 2024-07-04 10:47:36 发布

聂聂脸

最新推荐文章于 2024-07-04 10:47:36 发布

阅读量298

点赞数 4

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/2301_79420857/article/details/139842904

版权

开屏弹窗是什么，其实就是第一次登录后进入页面给你的一种公告提示，此后再回到当前这个页面时弹窗是不会再出现的。也就是说这个弹窗只会出现一次。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开屏alert</title>
		<script src="js/jquery-3.7.1.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.big {
				width: 100%;
				height: 100vh;
				background-image: url('img/WIN_20240308_14_38_12_Pro.jpg');
				background-size: 100%;
				background-repeat: repeat;
			}

			.big_item {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.item {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(0, 0, 0, 0.7);
			}

			.text {
				padding: 20px 10px;
				border-radius: 25px;
				width: 80%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: 60%;
				background-color: #ffffff;
			}

			.text p {
				margin-left: 2%;
				padding-bottom: 20px;
				font-size: 18px;
			}

			.yes {
				width: 80%;
				height: 10vh;
				border-radius: 50px;
				background-color: #ffc413;
				margin-left: 10%;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="big_item">
				<div class="item">
					<div class="text">
						<p> 考公考编时，才读懂《范进中举》；找工作时，才读懂《孔乙己》；谈婚论嫁时，才读懂《孔雀东南飞》；十五六岁的我在地理试卷上写下:
							“此地的优势在于其丰富的廉价劳动力，十年后的我审视着下班后的疲惫自己，一颗子弹正中眉心”；毕业后，站在讲台上成为一名教师，当我说出那句“学习是给你们自己学的，不是给我学的，才陡然明白我叫不醒他们，就像当年的老师叫不醒曾经的我们一样。也完美诠释了，教育具有长期性和滞后性，就像是一个闭环，多年后你有一个瞬间突然意识到什么，那就是子弹命中的瞬间。此时，才是教育的完成”不过花有重开日，人无少年时。我特别喜欢一段话；我们不能站在现在高度去批判当年的自己，这不公平，如果能重来一次，以当年的阅历和心理，还是会做出同样的选择。那么，不如放过自己和过去的你和解吧
							!
							教育是具有滞后性的，只有到了一定年纪有了感悟才会明白教育是会闭环的。以前高中上地理课，分析一个城市的区位优势，有一条一定要写“劳动力丰富低廉”。多年后大学毕业，拿着三千多的工资拿命熬夜加班，才真正理解劳动力到底有多廉价。小的时候觉得刻舟求剑是讽刺，长大之后才知道他的悲剧内核是遗憾，所以黄庭坚才写“往事刻舟求坠剑，怀人挥泪著亡簪”小时候会觉得怎么会有人做出掩耳盗铃这种傻事？长大之后才知道你我皆凡人，自欺欺人说到底也不过是一种自保。当失去至亲才知道《陈情表》中“臣无祖母无以至今日，祖母无臣无以终余年”这背后的深情。亲人的离世，不是一场暴雨，而是一生的潮湿。当面对和周围人的巨大差距，才知道《送东阳马生序》中“余则匀袍蔽衣处其间，略无慕羡意”这需要不断地修行，才能长出强大的自信。当独自闯荡社会才知道《记承天寺夜游》中“但少闲人如吾两人者尔”浪漫难觅，知己难求。可贵的不是那晚的月光，而是月光下推心置腹的我们。当时过境迁，所有的付出都有了结果，才知道《早发白帝城》中“两岸猿声啼不住，轻舟已过万重山”功不唐捐，命运最终会嘉奖每一个相信天道酬勤的人。
						</p>
						<div class="yes" onclick="yes()">确定</div>
					</div>
				</div>
			</div>

		</div>
		<script>
			// 声明一个变量
			let status;
			// 设置一个自执行函数
			(function() {
				// 判断存储取的值等于1
				if (sessionStorage.getItem("status") == 1) {
					// 成立就隐藏
					$(".big_item").css("display", "none");
				} else {
					$(".big_item").css("display", "block");
				}
			}())
			// 点击确定的点击事件
			function yes() {
				// 给这个变量赋值
				status = 1;
				// 并将此变量使用临时存储存起来
				sessionStorage.setItem("status", 1);
				// 并将弹窗隐藏
				$(".big_item").css("display", "none");
			}
		</script>
	</body>
</html>

开屏弹窗步骤就很简单：
声明一个全局变量，给弹窗的确定绑定点击事件，点击确定，给声明的变量赋值为1，并使用临时存储存起来，然后将弹窗隐藏，设置自执行定时器，判断取的临时存储的值等于1时将弹窗隐藏，否则就让弹窗显示；

最主要的就是存取值而已！

聂聂脸

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js如何实现开屏弹窗

声明一个全局变量，给弹窗的确定绑定点击事件，点击确定，给声明的变量赋值为1，并使用临时存储存起来，然后将弹窗隐藏，设置自执行定时器，判断取的临时存储的值等于1时将弹窗隐藏，否则就让弹窗显示；开屏弹窗是什么，其实就是第一次登录后进入页面给你的一种公告提示，此后再回到当前这个页面时弹窗是不会再出现的。也就是说这个弹窗只会出现一次。最主要的就是存取值而已！
复制链接

扫一扫