js 实现遮罩层锁屏功能

我们需要对弹出的窗口进行强调突出表现，那么需要对周围的元素进行遮罩。并且周围的元素还不可以进行操作，又需要进行锁屏。最后我们需要对重复的代码进行封装。

 

一 界面设计

效果图一

效果图2

二 设置效果

1.做一个遮罩层

       创建一个可以布满整个浏览器的div,将它z-index层结构设置为9998，而login弹窗的div设置为9999，高一层。这样可以锁屏+遮罩。

       画布的css为：

filter:alpha(Opacity=30);//IE透明度 opacity:0.30;//非IE透明度 z-index：9998；//层高度。

2.锁屏功能

Base.prototype.lock=function(){        for(var i=0; i<this.elements.length;i++){//遍历               this.elements[i].style.height=getInner().height+'px';         //得到遮罩层的（整个浏览器）高               this.elements[i].style.width=getInner().width+'px';         //得到浏览器遮罩层的（整个浏览器）宽               this.elements[i].style.display='block';//显示遮罩层        }        return this;//返回再次调用 否则只能调用一次 };

2.1.跨浏览器获取窗口大小

//跨浏览器获取窗口大小兼容 function getInner(){        if(typeof innerWidth){//低版本的火狐浏览器               return {                      width:window.innerWidth,                      height:window.innerHeight               }        }else{//其他浏览器               return{                      width:document.documentElement.clientWidth,                      height:document.documentElement.clientHeight               }        } }

3.关闭锁屏功能

//关闭锁屏 Base.prototype.unlock=function(){        for(var i=0; i<this.elements.length;i++){//遍历               this.elements[i].style.display='none';//隐藏遮罩层        }        return this;//返回再次调用 否则只能调用一次 };

 

4.调用

//登录               //设置物体居中、触发浏览器事件        var login=$().getId('login');        var screen=$().getId('screen');        login.center(350,250);        //改变浏览器窗口大小        $().resize(function(){               login.center(350,250);               if(login.css('display')==='block'){//登录弹框打开时才执行锁屏                      screen.lock();               }        });        //点击事件 打开关闭        $().getClass('logBtn').click(function(){               login.css('display','block');               screen.lock();        });        $().getClass('close').click(function(){               login.css('display','none');               screen.unlock();        });