html实现弹窗的实例

ID:16186 / 打印

上午闲来无事,用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> 
上一篇: html5调用摄像头实例代码
下一篇: HTML5简单实现添加背景音乐的几种方法

作者:admin @ 24资源网   2024-11-01

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。