原生JS遮罩层

开发工具与关键技术：DW  JavaScript
撰写时间：2019年2月21日

听到“遮罩层”这个词顾名思义大家都知道最少也要有两层，上面一层是‘遮罩层’，下面一层是‘被遮罩层’。这两个图层中只有相重叠的时候才会被显示。遮罩层上的图，自己是不显示的它只起到一个透明的作用。当你给被遮罩层一个点击事件去触发遮罩层，那么遮罩层才会显示出来。
下面我们一起来看一下遮罩层的html结构布局：

这是css的样式代码：

@charset "utf-8";
/* CSS Document */
.content{
	width: 47px;
	height: 21px;
	margin: 0 auto;
	padding-top: 100px;
}
.content button{
	background: url(../Images/ckjihua.gif) 0px -28px;
	border: none;
	color: #fff;
	cursor: pointer;
}
.con{
	height: 1155px;
	width: 100%;
	background: rgba(0,0,0,0.5);
	position: fixed;
	top: 0px;
	left: 0px;
	display: none;
}
.box{
	width: 300px;
	padding: 15px;
	background: #fff;
	position: absolute;
	top: 4%;
	left: 40%;
	border-radius: 5px;
}
.character {
	text-align: center;
}
.character button{
	background: #057ee9;
	box-shadow: 2px 2px 3px #0068c4;
	border: none;
	color: #fff;
	font-weight: bold;
	border-radius: 2px;
	cursor: pointer;
}

最后，就是在js里写的遮罩层的代码：

下面是效果图：


点击领取按钮遮罩层就会显示出来了。