html实现弹窗的实例

作者：袖梨 2025-07-12

上午闲来无事，用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弹窗内容请搜索一聚教程网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持一聚教程网！