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 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
table不让td文字溢出操作方法
Dec 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一些公用函数的集合
2008/03/27 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python生成随机MAC地址
2015/03/10 Python
深入Python函数编程的一些特性
2015/04/13 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
优秀干部获奖感言
2014/01/31 职场文书
个性与发展自我评价
2014/02/11 职场文书
5s推行计划书
2014/05/06 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
决心书格式范文
2015/09/23 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
关于nginx 实现jira反向代理的问题
2021/09/25 Servers