原生JS和CSS，HTML实现开屏弹窗
开屏弹窗常应用于打开游戏，或者打开网站的时候，跳出来在正中间，来显示一些信息，并可以设置今日不再显示
CSS代码如下
<style>
#box {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.2);
position: relative;
display: none;
}
.alerts {
width: 250px;
height: 400px;
background-color: pink;
position: relative;
left: 20%;
top: 10%;
}
h1 {
color: red;
text-align: center;
padding-top: 20px;
font-family: KaiTi;
}
#contents {
height: 100px;
width: 350px;
margin-left: 10%;
overflow-x: hidden;
overflow-y: scroll;
margin-top: 40%;
color: black;
}
.contents_box {
height: 300px;
width: 400px;
border: 1px solid pink;
margin: auto;
text-align: center;
background-image: url(/img/q.jpeg);
background-size: 120%;
background-repeat: no-repeat;
border-radius: 15%;
}
.result {
text-align: right;
margin-top: 20px;
}
.btn {
width: 100px;
height: 60px;
line-height: 60px;
margin: 40px auto;
border: 1px solid pink;
border-radius: 15%;
color: white;
text-align: center;
background-color: purple;
transition-duration: 0.5s;
}
.btn:hover {
background-color: white;
color: black;
font-family: KaiTi;
padding-top: 5px;
}
.confrim div {
margin-bottom: 5px;
}
.pic_tree img {
width: 100px;
height: 100px;
position: absolute;
top: 15px;
}
.pic img {
width: 50px;
height: 50px;
margin: auto;
position: absolute;
}
.pic {
width: 50px;
height: 50px;
margin-left: 150px;
position: absolute;
}
</style>以下为HTML代码：
<!-- 遮罩层 -->
<div id="box">
<!-- 圣诞树 -->
<div class="pic_tree"><img src="/img/圣诞树.png" alt=""></div>
<!-- 公告层 -->
<div id="alerts">
<!-- 公告头 -->
<h1>圣诞快乐</h1>
<!-- 公告内容盒子 -->
<div class="contents_box">
<div id="contents">
<p>111111111</p>
</div>
</div>
<div class="result"><input type="checkbox" id="results" />今日不再显示</div>
<div class="pic"><img src="/img/猫咪.png" alt=""></div>
<div class="btn" onclick="breakAlert()">我知道了</div>
</div>
</div>注：代码内的图片可能会失效，仅仅是装饰作用，可以忽略或者删除
JS代码如下：
<script>
//获得最外面的大盒子
let box = document.getElementById(`box`);
//获得内容
let content = document.getElementById('contents');
//获得今日不再显示的复选框
let resultst = document.getElementById('results');
let obj = {
contents: '《敕勒歌》是南北朝时期流传于北朝的乐府民歌，
一般认为是由鲜卑语译成汉语的诗作。
此诗歌咏了北国草原壮丽富饶的风光，
抒写敕勒人热爱家乡热爱生活的豪情。
开头两句交代敕勒川位于高耸云霄的阴山脚下，
将草原的背景衬托得十分雄伟。接着两句用“穹庐”作比喻，
说天空如蒙古包，盖住了草原的四面八方，
以此来形容极目远望，天野相接，无比壮阔的景象。
最后三句描绘了一幅水草丰盛、牛羊肥壮的草原全景图。
有静有动，有形象，有色彩。全诗风格明朗豪爽，
境界开阔，音调雄壮，语言明白如话，艺术概括力极强
，受到历代文论家和文学史论著的好评。对它的学术研究，经久不衰。`'
};
//将对象的内容里的值填入content中
content.innerHTML = obj.contents;
//判断当本地存储的这个时间小于现在的时间时，且本地存储存在的时候
if (localStorage.getItem('times') < + new Date() && sessionStorage.getItem('status') != 1) {
//显示这个盒子弹窗（弹窗默认为隐藏）
box.style.display = 'block';
}
//定义一个函数为breakAlert，将他绑定在“我知道了”按钮上
function breakAlert() {
//即当复选框被选中的时候，为true
if (resultst.checked == true) {
//设置一个本地存储，数值为当前时间+1天，即明天的当前时间
localStorage.setItem('times', +new Date() + 24 * 60 * 60 * 1000);
}
//并且设置一个临时储存，名为“status”，值为1
sessionStorage.setItem('status', `1`);
//同时将盒子设为隐藏
box.style.display = 'none';
}
</script>代码内的obj仅为示例，后续可更改为任意数据或者直接从其他地方引用，本篇文章仅仅在前端并未与其他服务器等交互的前提下，使用原生JS和CSS,HTML来完成类似的开屏弹窗示例，后续可更改CSS样式代码让样式变得更好看
原文地址：https://blog.csdn.net/m0_75075881/article/details/143905596
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！