原生JS和CSS，HTML实现开屏弹窗

开屏弹窗常应用于打开游戏，或者打开网站的时候，跳出来在正中间，来显示一些信息，并可以设置今日不再显示

CSS代码如下

html 复制代码

<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代码：

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代码如下：

javascript 复制代码

<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样式代码让样式变得更好看