HTML 网页弹出的遮罩层

发布时间: 2019-11-20 15:05:43 作者: 大象笔记

例如,点击页面中的一个按钮,弹出一个 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);
我是一名山东烟台的开发者,联系作者