【JavaScript 13—应用总结】：锁屏遮罩

导读：上次说了，当弹出登录框时，由于背景色和弹出框时一样的，这样子，其实比较难聚焦到底该操作哪一块。所以，如果，有了颜色的区分，那么通过屏幕遮罩的效果，就可以将我们希望要被处理的东西突出显示。也就达到了一个间接聚集的效果。

一、实现分析

锁屏遮罩，其实是在作品展的时候，和小伙伴一起用过。当时本来是一个新实现的功能，结果被师姐说费事儿了。现在，觉得这样的遮罩功能在某些层面上，还是有用的。至少可以通过一个明暗的对比，突出显示出我们想要显示的东西。

首先，锁屏遮罩是针对于整个屏幕来说的，所以，需要有一个对于整个屏幕的CSS样式设置，主要是颜色和透明度的设置。

其次，因为浏览器的大小是不确定的，所以在不同大小的浏览器上设置锁屏，则需要获取当前屏幕的长、宽，也就是获取当前视口的大小。

然后，需要有一个锁屏的方法，既然有了锁屏的方法（当锁屏时，只允许操作突出显示的东西，别的东西失效），那么当退出弹出框的时候，则相应的有一个取消锁屏的方法。

最后，在需要的弹出框显示的时候，同时调用锁屏的方法。退出时，同理。

附：效果图

二、具体实现

2.1，锁屏CSS

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">/* 设置屏幕样式 */#screen{position:absolute;top:0;left:0;background:#000;z-index:1;filter:alpha(opacity=30);opacity:0.3;display:none;}</span></span>

注：需要在HTML中增加一个div控制全屏。而这里的z-index，则是将锁屏变暗的屏幕至于最底层，所以同时需要在现实的div样式中，将z-index进行相应的设置，如没有别的设置，总共只有两层，可以设置为2。

2.2，获取视口（跨浏览器）

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">function getInner(){if(typeof window.innerWidth!="undefined"){return{width:window.innerWidth,height:window.innerHeight}}else{return{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}}}</span></span>

2.3，锁屏

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">Base.prototype.lock=function(){for(var i=0;i<this.elements.length;i++){this.elements[i].style.width=getInner().width+"px";this.elements[i].style.height=getInner().height+"px";this.elements[i].style.display="block";}return this;}</span></span>

首先是通过视口大小，结合设置的CSS颜色透明度，将窗口改变，然后，将设置好的CSS显示，也就是改变其display样式。

2.4，取消锁屏

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">//取消锁屏功能Base.prototype.unlock=function(){for(var i=0;i<this.elements.length;i++){this.elements[i].style.display="none";}return this;}</span></span>

将显示出的CSS样式隐藏。

2.5，运用（弹出登陆框为例）

1，在浏览器改变视口大小时，如果锁屏遮罩显示，那么则执行锁屏。

2，在弹出登陆框时，执行锁屏。

3，在退出登录框时，关闭锁屏。

三、个人感受

1，通过锁屏遮罩，可以控制浏览器窗口的物件的有效性，通过颜色明暗的对比，设置出整个浏览器的层次性。但是，在我们运用的大多数浏览器中，屏幕可以拖动，弹出框可以拖动，甚至可以随着滚动条的移动而自行移动。那么这个将怎么处理呢？

2，这样虽然实现了锁屏遮罩，但在弹出框出现的同时，背景色同时改变，这样子会不会显得太突兀，怎样实现一个渐变的效果呢？

3，锁屏后，屏幕上的主要按钮，如：个人中心、登录、注册、logo主页等到底该不该失效？怎样在锁屏的过程中将自己不想其失效的物件变得有效？

以上都是遗留的问题，需要进一步的学习解决！