前端小记2（遮罩层）

浏览网页时点击登录弹出登录框后，之前的网页会被虚化，这是遮罩层在发挥作用。

实现方式如下（重点配置遮罩层）：

1.在网页html中加上一个遮罩层的div，如：

和登录框

2.设置遮罩层css：

.overCurtain {

    border-top:1px solid rgb(230,245,255);

    position:absolute;

    height:100%;

    width:100%;

    left:0px;

    top:0px;/*从左上角开始，覆盖整个页面*/

    opacity:0.7; /*透明度*/

    background-color:#999;

    z-index: 100;/*层，重叠时大的优先显示，默认为0。登陆框可以设为101*/

    display: none;/*开始不显示*/

    }

3.设置遮罩层&登录框 js

$(function(){

    $("#login").click(function () {    //显示登陆框和遮罩层，且登陆框覆盖部分遮罩层，因为两个z-index属性101>100

    $(".hide-center").fadeIn("slow");

    $(".overCurtain").fadeIn("slow");

})

$("#close").click(function () {    //关闭登陆框，返回原页面

    $(".hide-center").fadeOut("fast")

    $(".overCurtain").fadeOut("slow")

})

})