Html5页面点击遮罩层背景关闭遮罩层


Posted in HTML / CSS onNovember 30, 2020

今天团队同事接到一个需求,需求是这样的,点击页面按钮弹出红包弹窗,显示黑色遮罩层,点击遮罩层背景和弹窗关闭按钮要关闭弹窗,于是我就做了一个Demo出来,方便以后下次自己再遇到这种需求,上代码。

html代码

页面上只有一个展示的按钮,一个ID为bg的div作为灰色背景遮罩层使用,ID为popup的div作为红包弹窗,ID为close的div作为关闭按钮。

<body>
    <div class="btn" id="btn">展示</div>
    <div class="bg" id="bg">
        <div class="popup" id="popup">
            <div class="close" id="close">X</div>
        </div>
    </div>
</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关闭遮罩层内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 #HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 #HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 #HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 #HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 #HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 #HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 #HTML / CSS
You might like
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python中文乱码的解决方法
2013/11/04 Python
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python与R语言的简要对比
2017/11/14 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
浅析Python中字符串的intern机制
2020/10/03 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
酒店中秋节活动方案
2014/01/31 职场文书
庆元旦广播稿
2014/02/10 职场文书
网络技术专业推荐信
2014/02/20 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis