html实现弹窗的实例

上午闲来无事，用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>
    

到此这篇关于html实现弹窗的实例的文章就介绍到这了,更多相关html弹窗内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！