开屏弹窗是什么，其实就是第一次登录后进入页面给你的一种公告提示，此后再回到当前这个页面时弹窗是不会再出现的。也就是说这个弹窗只会出现一次。
<!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时将弹窗隐藏，否则就让弹窗显示；
最主要的就是存取值而已！