脚本宝典收集整理的这篇文章主要介绍了html实现弹窗的实例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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弹窗内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的html实现弹窗的实例全部内容，希望文章能够帮你解决html实现弹窗的实例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。