遮罩层实现-css初学

首先需要一个大盒子

<div id="box1">

</div>

接着把盒子设置为固定位置并且平铺整个页面，将left，top设置为0，将width和height设置为100%，再为它设置半透明背景：

<style type="text/css">
	#box1{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(200,200,200,0.5);

	}
</style>

 于是我们就获得了以下效果：

然后，我们再在大盒子中创建一个小盒子并填充内容 ：

<div id="box2">
	<div id="close">X</div>
	<p>这是一个窗口</p>
</div>

 为小盒子添加样式：

#box2{
	position: absolute;
	background-color: white;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 200px;
	transform: translate(-50%,-50%);
	text-align: center;

}
#close{
	position: absolute;
	width: 25px;
	height: 25px;
	text-align: center;
	top: 0px;
	right: 0px;
	color: blue;
	border: 1px solid black;

}

效果：

 可以为这个盒子添加一些事件，使得用户点击X号可以关闭小窗口：

<script type="text/javascript">
	window.onload = function(){
	    var box2 = document.getElementById('box2');
	    var closeB = document.getElementById('close');
		closeB.addEventListener('click',(e)=>{
			e.stopPropagation();
			box2.style.display = 'none'
		})
    }
</script>