首页 » JavaScript » JS 遮罩层

最后更新于 2018年11月19日

上一篇我们讲了使用伪元素来实现遮罩层,虽然很方便,但是也有一些缺点,比如:

  1. z-index需要设置好,由于伪元素是login里面的,所以哪怕伪元素的z-index:-999;也不可能穿透login元素,这样的话,form元素就要设置一下背景色了。
  2. 无法为伪元素添加点击事件

为此我们还可以单独创建一个遮罩层元素,这个元素一般在login元素的上面并且为同级元素,我们可以利用js创建或者先创建好再设置css,我这里选择js创建,虽然麻烦一点,但是显得有技术啊!233...

效果图:

css部分:

.login_Masked {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .3);
}

创建遮罩层Masked():

$().getclass('nav-login', 'header').click(function() {
            $().getId('login').Masked();
        })

Base封装:

Base.prototype.Masked = function() {
    for(var i = 0;i<this.arr.length;i++)  {
        var preSlg = this.arr[i].previousSibling;
        if(typeof preSlg == 'undefined' || preSlg.className != 'login_Masked') {
            var div = document.createElement('div');
            this.arr[i].parentNode.insertBefore(div,this.arr[i]);
            div.className = 'login_Masked';
            div.style.width = getInner().width + 'px';
            div.style.height = getInner().height + 'px';
        }else if(preSlg.className == 'login_Masked') {
            preSlg.style.width = getInner().width + 'px';
            preSlg.style.height = getInner().height + 'px';
        }
    }
    return this;
}

//跨浏览器获取可视宽度 
function getInner() {
    if (typeof innerWidth != 'undefined') {
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
}

这里我们通过判断如果login的上一个同级元素不存在(undefined)或者class不是login_ Masked,那么就创建一个div元素,将他插入在login的前面,并且设置class、width、height;由于宽高我们是固定设置的,这样,当浏览器窗口发生变化时,login_ Masked还是原来大小,为此,我们在resize()窗口事件中也要设置一下它的宽高,但是你不可能又写一个函数吧,所以就加一个else if 判断,如果上一个元素的class就是login_ Masked;那么就重新设置宽高。

于是调用代码:

$().getclass('nav-login', 'header').click(function() {
            $().getId('login').css('clip', 'auto').css('opacity', '1').center().Masked().resize(function() {
                $().getId('login').center().Masked();
            });
        }

但是,这样写我们会发现,不点击登录按钮,只是单纯的改变窗口大小也会出现遮罩层,原因就是应为resize()中我们使用了Masked(),所以我们还要做个判断,只有在login出现的时候才能运行Masked()。

$().getclass('nav-login','header').click(function(){
        $().getId('login').css('clip','auto').css('opacity','1').center().Masked().resize(function(){
            $().getId('login').center();
            if($().getId('login').css('opacity') == '1'){
                $().getId('login').Masked();
            };
        });
    });

创建好了自然是要删除的,于是:

删除遮罩层removeMasked():

$().getclass('login_off', 'login').click(function() {
    $().getId('login').css('clip', 'rect(0 0 0 0)').css('opacity', '0').removeMasked();
});

Base封装:

Base.prototype.removeMasked = function() {
    for(var i = 0;i<this.arr.length;i++)  {
        if(this.arr[i].previousSibling.className == 'login_Masked') {
            this.arr[i].parentNode.removeChild(this.arr[i].previousSibling);
        }
    }
    return this;
}

当关闭按钮点击后,判断login的上一个同级元素class是否为login_Masked,如果是的话删除。

其实这样可能并不严谨,但是从创建的角度看,我们的login_Masked不可能不是login的上一个同级元素,如果不放心,可以直接查找class然后删除即可。

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao