【实测】html实现弹窗 DIV+CSS弹窗代码-Discuz教程下载

【实测】html实现弹窗 DIV+CSS弹窗代码

来自版块: Discuz教程发表于: 2020-5-7 19:24:36
25287
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员,全站资源免费下
html及原生js写个弹窗,供参考
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title>【实测】html实现弹窗 DIV+CSS弹窗代码</title>
  6. <style type="text/css">
  7. body{ margin: 0px; }
  8. .zhezhao{ position: fixed; left: 0px; top: 0px; background: #000; width: 100%; height: 100%; opacity: 0.5; }
  9. .tankuang{ position: relative; background: #fff; width: 50%; height: 80%; border-radius: 5px; margin: 5% auto; }
  10. #header{ height: 40px; }
  11. #header-right{ position: absolute; width: 25px; height: 25px; border-radius: 5px; background: red; color: #fff; right: 5px; top: 5px; text-align: center; }
  12. </style>
  13.         </head>
  14.         <body>
  15.                 <button type="button" onclick="dianwo()">点我</button>
  16.                 <div class="zhezhao" id='zhezhao'>
  17.                         <div class="tankuang">
  18.                                 <div id="header">
  19.                                         <span>我是弹窗</span>
  20.                                         <div id="header-right" onclick="hidder()">x</div>
  21.                                 </div>
  22.                         </div>
  23.                 </div>
  24.                 <script type="text/javascript">
  25.                         document.getElementById('zhezhao').style.display="none";
  26.                         function dianwo(){
  27.                                 document.getElementById('zhezhao').style.display="";
  28.                         }
  29.                         function hidder(){
  30.                                 document.getElementById('zhezhao').style.display="none";
  31.                         }
  32.                 </script>
  33.         </body>
  34. </html>
复制代码
代码可直接拿来用,不足请指出。

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部