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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 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的输入输出流
2007/02/14 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
js使用递归解析xml
2014/12/12 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
职专应届生求职信
2013/11/16 职场文书
小学生常见病防治方案
2014/06/06 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
安全隐患整改报告
2014/11/06 职场文书
仙境之桥观后感
2015/06/16 职场文书
Mysql数据库命令大全
2021/05/26 MySQL