前端小记2(遮罩层)

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

实现方式如下(重点配置遮罩层):

1.在网页html中加上一个遮罩层的div,如:<div class="overCurtain"> </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")

})

})

猜你喜欢

转载自blog.csdn.net/captainNYS/article/details/79873736
今日推荐