html遮罩层 点击消失,Html5页面点击遮罩层背景关闭遮罩层代码示例

本篇文章小编给大家分享一下Html5页面点击遮罩层背景关闭遮罩层代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

需求：点击页面按钮弹出红包弹窗，显示黑色遮罩层，点击遮罩层背景和弹窗关闭按钮要关闭弹窗。

html代码

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

展示

X

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;