css弹出遮罩层页面不可滑动(Html5页面点击遮罩层背景关闭遮罩层)
类别:Web前端 浏览量:2861
时间:2021-10-24 10:28:07 css弹出遮罩层页面不可滑动
Html5页面点击遮罩层背景关闭遮罩层今天团队同事接到一个需求,需求是这样的,点击页面按钮弹出红包弹窗,显示黑色遮罩层,点击遮罩层背景和弹窗关闭按钮要关闭弹窗,于是我就做了一个Demo出来,方便以后下次自己再遇到这种需求,上代码。
html代码
页面上只有一个展示的按钮,一个ID为bg的li作为灰色背景遮罩层使用,ID为popup的li作为红包弹窗,ID为close的li作为关闭按钮。
<body> <li class="btn" id="btn">展示</li> <li class="bg" id="bg"> <li class="popup" id="popup"> <li class="close" id="close">X</li> </li> </li> </body>
CSS代码
css代码里面没什么技术难点,唯一要注意的是要给灰色背景的遮罩层一个绝对定位,top和lefe都为0就好了
body { position: relative; } .btn { width: 100px; height: 40px; line-height: 40px; text-align: center; margin:20px auto 0; border: 1px solid #333; border-radius: 10px; } .bg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .6); display: none; } .popup { width: 260px; height: 320px; background: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px; } .popup .close { width: 30px; height: 30px; line-height: 30px; text-align: center; position: absolute; top: -40px; right: 0px; border: 1px solid #999; border-radius: 50%; color: #999; }
JS代码
var btn = document.getElementById('btn'); var bg = document.getElementById('bg'); var popup = document.getElementById('popup'); var closeBtn = document.getElementById('close'); // 点击展示按钮显示弹窗 btn.addEventListener('click', ()=> { bg.style.display = 'block'; }); // 点击阴影遮罩层关闭弹窗 bg.addEventListener('click', (e)=> { bg.style.display = 'none' }); // 阻止冒泡事件,点击弹窗不会执行父元素的点击事件 popup.addEventListener('click', (e)=> { e.stopPropagation(); }); // 点击关闭符号关闭弹窗 closeBtn.addEventListener('click', (e)=> { e.stopPropagation(); bg.style.display = 'none' })
到此这篇关于Html5页面点击遮罩层背景关闭遮罩层的文章就介绍到这了,更多相关Html5关闭遮罩层内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5怎么将字体变为红色(Html5自定义字体解决方法)
- HTMl5 sessionStorage和localStorage
- html5的占位符(html5 冒号分隔符对齐的实现)
- html5封闭ios(Html5 页面适配iPhoneX就是那么简单)
- HTML5<q> 与 <blockquote> 的区别
- html5怎么设置倾斜(HTML5 body设置自适应全屏)
- html5本地存储功能(利用Node实现HTML5离线存储的方法)
- html5所有特性(HTML5 FileReader对象的具体使用方法)
- html5基本结构图(HTML5中的网络存储实现方式)
- html5如何使用svg(将SVG图引入到HTML页面的实现)
- html5中的语义化标签有哪些(详解HTML5常用的语义化标签)
- html5 页面向上滑动(html5手机键盘弹出收起的处理)
- html5的表单怎么写(HTML5新增form控件和表单属性实例代码详解)
- html5播放代码(html5 video全屏播放/自动播放的实现示例)
- html5入门布局(吃透移动端 Html5 响应式布局)
- html5标签图片(HTML5图片层叠的实现示例)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)
- 小米音乐与 QQ 音乐合作,便捷迁移会员(小米音乐与QQ音乐合作)
- 小米推出米兔儿童电话手表奥特曼版,799 元,支持微信 QQ(小米推出米兔儿童电话手表奥特曼版)
- 贾怀胤唱《白龙马》 炸场 了 没想到京剧还能这么玩(贾怀胤唱白龙马)
热门推荐
- dedecms系统怎么查看(DedeCMS V5.3/V5.5/V5.7 安全设置指南 图文推荐)
- C#中ICollection介绍
- SQL SERVER中使用WITH TIES获取前几行数据
- python面向对象基本思想(详解Python:面向对象编程)
- thinkphp5.1请求流程(ThinkPHP5.0框架使用build 自动生成模块操作示例)
- mvc JavaScriptResult的用法
- reactnative ios(详解React Native与IOS端之间的交互)
- canvas 中增加组件(如何在Canvas中添加事件的方法示例)
- 如何设置tomcat的jvm(Tomcatc3p0配置jnid数据源2种实现方法解析)
- idea 启动docker容器不重新打包(Docker遇到Intellij IDEA,Java开发提升了十倍生产力)