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

弹出窗（原生js）

2023-07-11 59
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 弹出窗（原生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原生
破浪前进
目录
相关文章
进步`于辰
|
8天前
|
移动开发 前端开发 JavaScript
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面，开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面，涉及多种特效实现，如动态图片切换和人物聚合效果。作品源码已上传至CSDN，视频效果可在CSDN预览。
进步`于辰
13 0
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
六卿
|
2月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏，包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑，提供了详细的代码和注释。
六卿
34 0
原生JavaScript+canvas实现五子棋游戏_值得一看
土木林森
|
3月前
|
Devops 持续交付 测试技术
JSF遇上DevOps：开发流程将迎巨变？一篇文章带你领略高效协同的魅力！
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces（JSF）开发中融入DevOps文化，通过持续集成与部署、自动化测试、监控与日志记录及反馈机制，提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法，并强调了持续改进的重要性。
土木林森
38 0
土木林森
|
3月前
|
JavaScript 前端开发 API
从零开始学表单操作，jQuery 与原生 JavaScript 完全指南，带你轻松掌握网页交互关键！
【8月更文挑战第31天】在网页开发中，表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入，都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单，包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性，但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
土木林森
33 0
今天是几号
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
今天是几号
51 5
茶卡盐佑星_
|
5月前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
茶卡盐佑星_
37 2
朝阳39
|
4月前
|
JavaScript
js 一键复制到剪贴板（原生js实现）
js 一键复制到剪贴板（原生js实现）
朝阳39
31 0
hnrk7epeorhrk
|
5月前
|
前端开发 JavaScript 容器
程序技术好文：纯原生javascript下拉框表单美化实例教程
程序技术好文：纯原生javascript下拉框表单美化实例教程
hnrk7epeorhrk
84 0
北原_春希
|
5月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
北原_春希
203 0
北原_春希
|
5月前
|
JavaScript 前端开发
原生JS如何查询元素属性
原生JS如何查询元素属性
北原_春希
40 0