纯HTML实现关闭按钮

css部分

<style>
    .close {
          position: absolute;
          display: inline-block;
          width: 30px;
          height: 30px;
          overflow: hidden;
          top: 5px;
          right: 5px;
        }
        
        .close::before, .close::after {
          content: '';
          position: absolute;
          height: 2px;
          width: 100%;
          top: 50%;
          left: 0;
          margin-top: -1px;
          background: #000;
        }
        .close::before {
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
        }
        .close::after {
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
        }
        
        
        .close.thick::before, .close.thick::after {
          height: 4px;
          margin-top: -2px;
        }
        .close:hover::before, .close:hover::after {
          background: #1ebcc5;
        }
   
    </style>

HTML部分

<div id="demo" class="top" style="padding:35px 35px 0;overflow:auto;width:60%;height:500px;background-color:rgba(240,240,240,1);position:fixed;margin:0 auto;
                    left:20%;top:100px;border-radius:5px;z-index:9999;display:none;">
                        <div style="position:absolute;top:10px;font-size:16px;font-weight:900">标题</div>
                         <div>
                        <span class="close thick" id='bt'></span>
                        </div>
                        <div  style="position:absolute;left:0px;width:100%;background-color:rgb(255,255,255);">
                        <br>
                        
                        <div style="text-align:center;vertical-align:middle;top: 80%;position: relative;">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" type="button"  id="bt1" lay-submit lay-filter="login" align="right" >关闭</button>
                        </div>
    </div>

js部分

//关闭
        var obt1 = document.getElementById("bt1");
          obt1.onclick = function () {
              document.getElementById("demo").style.display="none";          
          }

 var obt = document.getElementById("bt");
          obt.onclick = function () {
              document.getElementById("demo").style.display="none";
          }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值