JS 遮罩层

61 0

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

  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然后删除即可。

0
  • 本文分类:JavaScript
  • 本文标签:JS 遮罩层
  • 流行热度:已超过 61 人围观了本文
  • 发布日期:2018年11月19日 - 2时49分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

评论(0)

微信收款码
微信收款码