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