码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 纯js写一个弹窗


      html代码:

      <button id="btn" οnclick="openframe()">点击弹出</button>
      <div id="modal">
      <div class="win">
      <p>我是弹框中的内容</p>
      <span class="close" οnclick="closeframe()">×</span>
      </div>
      </div>

        css代码:

      *{
      margin: 0;
      padding: 0;
      }

      body{
       100%;
      background-color: #ececec;
      }
      button{
      background-color: transparent;
      border: 1px solid dodgerblue;
      background-color: #1E90FF;
      color: #fff;
      border-radius:2px;
      margin: 20px 20px;
       5%;
      cursor: pointer;
      }
      #modal{
       100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      background-color: rgba(0,0,0,.4);
      display: none;
      z-index: 999;
      }
      #modal .win{
       80%;
      height: 120px;
      background-color: lightgoldenrodyellow;
      margin: 300px auto;
      position: relative;
      }
      .win span{
      position: absolute;
      right: 5px;
      top:-8px;
      font-size: 30px;
      color: #333;
      cursor: pointer;
      }
      .win p{
      padding-top: 50px;
      text-align: center;
      }

     js代码:

      var btn=document.getElementById("btn");
      var modal=document.getElementById("modal");
      var close=document.getElementsByClassName("close");
      //点击按钮,弹出弹框
      function openframe(){
      modal.style.display="block";
      }
      //点击叉号,关闭弹窗
      function closeframe(){
      modal.style.display="none";
      }
      //点击其他地方窗口隐藏
      window.οnclick=function(e){
      if(e.target==modal){
      modal.style.display="none";
      }
      }

  • 相关阅读:
    使用Python进行名片OCR(识别姓名,职务,电话,Email邮箱)
    LeetCode 112:路径总和
    python生成随机数
    Python:熬夜把内置库函数整理成合集了,不要错过 ❢
    java-net-php-python-ssh电动车销售系统计算机毕业设计程序
    〖全域运营实战白宝书 - 运营角色认知篇③〗- 运营的底层逻辑是什么?
    ThinkPHP框架使用工厂模式对接多个物流公司下单接口架构示例(php7.0及以上)
    java计算机毕业设计高校人事管理系统MyBatis+系统+LW文档+源码+调试部署
    Metasploit工具你需要知道的功能
    纯技术程序员的悲哀和出路
  • 原文地址:https://blog.csdn.net/weixin_52312684/article/details/125472456
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号