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

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