html实现弹窗的实例
2021-07-11 16:54
1181 查看
上午闲来无事,用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弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- javascript实现的右下角弹窗实例
- 基于html+css+js实现简易计算器代码实例
- 【实例】html-canvas中实现图片的放大
- asp.net,C#,html控件的File控件实现多文件上传简单实例,vs2010
- JQuery和html+css实现带小圆点和左右按钮的轮播图实例
- Java实现Word/Pdf/TXT转html的实例代码
- html+css+js实现点击xxx出现弹窗
- html5+css3实现一款注册表单实例
- javascript实现html页面之间参数传递的四种方法实例分析
- Android Studio中实现本地html中js与java交互简单实例
- 用js+html+css实现自定义弹窗
- 正则表达式处理html实例(Perl实现)
- html+css实现文字折叠特效实例
- scrollLoading插件实现图片延迟懒加载实例包涵html和js代码
- js实现弹窗插件功能实例代码分享
- JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
- 用HTML/JS/PHP方式实现页面延时跳转的简单实例
- html+css实现分层金字塔的实例
- javascript另类方法实现htmlencode()与htmldecode()函数实例分析
- Silverlight中实现带CheckBox的多选下拉框--来源(附有实例代码):http://www.cnblogs.com/shiaupo/archive/2011/06/04/2072668.html