html实现弹窗的实例

2024-11-2 22:35| 发布者: db4d5a85| 查看: 76| 评论: 0

摘要: 上午闲来无事，用html及原生js写个弹窗，供参考。 [code] <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ margin: 0px; } .zhezhao{

上午闲来无事，用html及原生js写个弹窗，供参考。

[code] <!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> [/code]

到此这篇关于html实现弹窗的实例的文章就介绍到这了,更多干系html弹窗内容请搜索脚本之家从前的文章或继续欣赏下面的干系文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/778542.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：HTML5来实现本地文件读取和写入的实现方法下一篇：Html5大屏数据可视化开发的实现

账号		自动登录	找回密码
密码			立即注册

html实现弹窗的实例

相关分类

站长推荐 /6