• 纯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";
      }
      }

  • 相关阅读:
    spring5.0源码解析 从源码角度分析 advice 的执行顺序 aop 05
    【机器学习-周志华】学习笔记-第七章
    C++入门和基础
    如何做好分布式任务调度——Scheduler 的一些探索
    住房贷款等额本息(等额本金)还款计划计算
    黑马JVM总结(三十二)
    Postman(3): postman发送POST请求
    KMP再理解
    路由Vue Route
    mysql group by详解
  • 原文地址:https://blog.csdn.net/weixin_52312684/article/details/125472456