CSS实现 正在提交不可操作 的遮罩效果

 

1.首先需要两个div，一个是位于遮罩上层的提示框(msg-content)，一个是位于页面内容上方的遮罩(mask)。 

<div class="msg-content"></div>
<div class="mask"></div>

2.提示框样式

.msg-content {
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;
	z-index:999999;	
	display:none;	
	height:100px;
	width:300px;
	background-color:#ffffff;
}

其中，position为fixed是为了相对于浏览器定位，让提示框固定在相对于浏览器的某个位置，比如正中间。

 

fixed结合left,right,top,bottom的值即可根据浏览器定位。这里位置值全部设置为0px，然后加上margin：auto即可实现该div相对于浏览器的居中（不随滚动条滑动而变化）。

接下来，比较重要的就是设置其z-index，控制它所属的层级。注意