HTML 网页弹出的遮罩层

更新日期: 2019-11-21 阅读次数: 9196 字数: 127 分类: CSS

例如,点击页面中的一个按钮,弹出一个 form 框,让用户填写并提交信息。

此时就需要一个遮罩层。

HTML

<div class="bg_mask">
</div>

CSS

.bg_mask {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.95;
	opacity: 0.95;
	filter: alpha(opacity = 95);
}

更优雅的展现

直接使用 jquery 的 show 来显示遮罩层,显得太突兀,缺乏过度的过程。

加上从上至下的展示动画就好多了。

$('.bg_mask').slideDown(1000);

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式