开发者社区开发与运维文章正文

弹出窗（原生js）

2024-01-10 13

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 弹出窗（原生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原生

破浪前进

你挚爱的强哥

24天前

JSON JavaScript 前端开发

JavaScript原生代码处理JSON的一些高频次方法合集

你挚爱的强哥

15 0 0

m0_黎明

3月前

JavaScript

原生js实现复选框（全选/全不选/反选）效果【含完整代码】

m0_黎明

61 1 1

你挚爱的强哥

24天前

JavaScript 算法

原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM

你挚爱的强哥

29 1 1

她说她一如既往的爱我

4月前

前端开发 JavaScript 索引

JS和CSS实现的原生轮播图

她说她一如既往的爱我

26 0 0

可乐鸡翅kele

3天前

前端开发 JavaScript 调度

原生JavaScript实现弹幕组件

可乐鸡翅kele

14 3 3

yma16

6天前

JavaScript 前端开发 BI

原生html—摆脱ps、excel 在线绘制财务表格加水印（html绘制表格js加水印）

yma16

10 1 1

1941623231718325

10天前

JavaScript 前端开发 UED

深入解析JavaScript原生操作DOM技术

【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术，包括使用`getElement*`方法和CSS选择器获取元素，借助`createElement`与`appendChild`动态创建及插入元素，修改元素内容、属性和样式，以及删除元素。通过掌握这些技术，开发者能实现页面动态交互，但应注意避免过度操作DOM以优化性能和用户体验。

1941623231718325

14 1 1

1941623231718325

10天前

JSON 前端开发 JavaScript

JavaScript原生实现AJAX技术详解

【4月更文挑战第22天】本文详细介绍了使用原生JavaScript实现AJAX技术，包括基本原理和步骤。AJAX借助`XMLHttpRequest`对象实现异步通信，允许网页在不刷新情况下与服务器交换数据。文中提供示例展示了如何创建请求、设置回调函数、处理响应数据以及设置请求头和发送不同类型的数据。此外，还讨论了跨域问题及其解决方案，如CORS和JSONP。掌握这些基础知识对前端开发者至关重要，尽管现代框架提供了更高级的抽象。

1941623231718325

13 0 0

你挚爱的强哥

24天前

JavaScript

【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集

你挚爱的强哥

14 0 0

她说她一如既往的爱我

4月前

JavaScript 前端开发

jsjs原生 JavaScript轮播图渐变淡入淡出

她说她一如既往的爱我

25 0 0

弹出窗（原生js）

热门文章

最新文章

相关课程

相关电子书

相关实验场景