HTML 网页弹出的遮罩层

文章目录

    例如,点击页面中的一个按钮,弹出一个 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);