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();

       });