备案控制台
开发者社区 开发与运维 文章 正文

弹出窗（原生js）

2023-07-11 45
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 弹出窗（原生js） 
<style>
      * {
        padding: 0;
        margin: 0;
      }
      #banner {
        width: 100%;
        height: 100vh;
        background-color: gray;
        position: relative;
      }
      #alert {
        width: 55%;
        height: 800px;
        background-color: aliceblue;
        position: absolute;
        left: 24%;
        top: 20vh;
        display: flex;
        align-items: center;
      }
      #alert img {
        top: -120px;
        left: 490px;
        height: 100px;
        position: absolute;
      }
      #alert p {
        font-size: 80px;
        width: 100%;
        text-align: center;
      }
      #k{
        width: 50%;
        height: 400px;
        margin-left: 25%;
        margin-top: 40vh;
      }
      #k p{
        font-size: 50px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="banner">
      <div id="alert">
        <p>等一下</p>
        <i onclick="fn()"><img src="./img/错误提示.svg" alt=""></i>
      </div>
    </div>
    <div id="k">
      <p>恭喜发财</p>
    </div>
    <script>
      let a = document.getElementById('alert');
      let b = document.getElementById('banner');
      function fn() {
        sessionStorage.setItem('a', true);
        a,b.style.display = 'none'
      }
      let data = sessionStorage.getItem('a')
      if (data != null) {
        a,b.style.display = 'none'
      }
    </script>


文章标签：
JavaScript
关键词：
JavaScript原生
破浪前进
目录
相关文章
博客zhu虎康
|
19天前
|
JavaScript 算法 数据安全/隐私保护
原生JS实现：密码输入框显示隐藏密码效果
原生JS实现：密码输入框显示隐藏密码效果
博客zhu虎康
66 4
你挚爱的强哥
|
19天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
你挚爱的强哥
19 0
你挚爱的强哥
|
19天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
你挚爱的强哥
34 1
yqcoder
|
17天前
|
前端开发 JavaScript
前端 js 经典：Object 常用原生方法
前端 js 经典：Object 常用原生方法
yqcoder
44 2
yqcoder
|
17天前
|
前端开发 JavaScript
前端 js 经典：array 原生方法
前端 js 经典：array 原生方法
yqcoder
20 1
老板这功能得加钱
|
17天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
老板这功能得加钱
8 0
球球不吃虾
|
18天前
|
监控 JavaScript 前端开发
超越原生：探索Node.js中最佳文件系统三方库
超越原生：探索Node.js中最佳文件系统三方库
球球不吃虾
24 0
jerrywangsap
|
19天前
|
JavaScript 前端开发 索引
JavaScript array 原生 reduce 方法的模拟实现
JavaScript array 原生 reduce 方法的模拟实现
jerrywangsap
18 2
Goodluck-dys
|
19天前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
Goodluck-dys
16 0
风与烈酒
|
19天前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
风与烈酒
16 0