原生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() {//即当复选框被选中的时候，为trueif (resultst.checked == true) {//设置一个本地存储，数值为当前时间+1天，即明天的当前时间localStorage.setItem('times', +new Date() + 24 * 60 * 60 * 1000);}//并且设置一个临时储存，名为“status”，值为1sessionStorage.setItem('status', `1`);//同时将盒子设为隐藏box.style.display = 'none';}</script>

代码内的obj仅为示例，后续可更改为任意数据或者直接从其他地方引用，本篇文章仅仅在前端并未与其他服务器等交互的前提下，使用原生JS和CSS,HTML来完成类似的开屏弹窗示例，后续可更改CSS样式代码让样式变得更好看