当前位置 博文首页 > html实现弹窗的实例

    html实现弹窗的实例

    作者:小小文呀 时间:2021-06-10 18:02

    上午闲来无事,用html及原生js写个弹窗,供参考。

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8" />
      <title></title>
      <style type="text/css">
       body{
        margin: 0px;
       }
       .zhezhao{
        position: fixed;
        left: 0px;
        top: 0px;
        background: #000;
        width: 100%;
        height: 100%;
        opacity: 0.5;
       }
       .tankuang{
        position: relative;
        background: #fff;
        width: 50%;
        height: 80%;
        border-radius: 5px;
        margin: 5% auto;
       }
       #header{
        height: 40px;
       }
       #header-right{
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 5px;
        background: red;
        color: #fff;
        right: 5px;
        top: 5px;
        text-align: center;
       }
      </style>
     </head>
     <body>
      <button type="button" onclick="dianwo()">点我</button>
      <div class="zhezhao" id='zhezhao'>
       <div class="tankuang">
        <div id="header">
         <span>我是弹窗</span>
         <div id="header-right" onclick="hidder()">x</div>
        </div>
       </div>
      </div>
      <script type="text/javascript">
       document.getElementById('zhezhao').style.display="none";
       function dianwo(){
        document.getElementById('zhezhao').style.display="";
       }
       function hidder(){
        document.getElementById('zhezhao').style.display="none";
       }
      </script>
     </body>
    </html>
    
    js
    下一篇:没有了