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

本文介绍了如何使用CSS实现一个'正在提交不可操作'的遮罩效果。主要内容包括创建提示框和遮罩层的CSS样式,重点在于利用`position`和`z-index`控制元素的层级关系,以及`fixed`定位实现屏幕居中。通过调整透明度和背景色,完成全屏遮罩效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

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,控制它所属的层级。注意,设置了z-index的同时必须设置position为非静态值,否则不会生效。即z-index的层叠关系仅对非静态元素生效。这里我对z-index做一个简单易懂的概括:

如果给浏览器画个坐标轴,横轴x,纵轴y,那么它只是一个二维平面。如果再添一个轴(z轴),那么页面上的元素就有了层级关系。但是很可惜,浏览器本身“不存在”这个z轴,若非要表示层级关系,只能给某些需要表示的关系一个标记:非静态元素(你可以理解为,他们不像静态元素那样老老实实的呆在平面上!),有了这个标记,这些带有标记的元素就可以排成一个z轴。注意,是他们组成了z轴,而不是他们在z轴上定位。通过设置他们的z-index,就可以给他们进行相对的排序啦。

最后,对dix进行简单处理,设置背景色,宽高,隐藏(JS脚本再控制显示)就ok了。

遮罩的原理和提示框很像,代码如下:

3.遮罩层样式

.mask {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: #000;
	opacity: .4;
	filter: alpha(opacity = 40);
	z-index: 10000;
	display:none;
}

注意,mask没有设置宽高,加上前五行的定位就是铺满全屏的效果。在设置透明度和背景色即可。遮盖层的z-index一定要比层下元素的z-index(如果有的话)大,比提示框的z-index小。

这样功能就可以实现了!但要注意,z-index和position联合控制层级的知识点没有我说的这么少,为了方便大家理解,我简单的做了下解释,想要深入了解的可以自行查下~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值