导读：上次说了，当弹出登录框时，由于背景色和弹出框时一样的，这样子，其实比较难聚焦到底该操作哪一块。所以，如果，有了颜色的区分，那么通过屏幕遮罩的效果，就可以将我们希望要被处理的东西突出显示。也就达到了一个间接聚集的效果。
一、实现分析
锁屏遮罩，其实是在作品展的时候，和小伙伴一起用过。当时本来是一个新实现的功能，结果被师姐说费事儿了。现在，觉得这样的遮罩功能在某些层面上，还是有用的。至少可以通过一个明暗的对比，突出显示出我们想要显示的东西。
首先，锁屏遮罩是针对于整个屏幕来说的，所以，需要有一个对于整个屏幕的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主页等到底该不该失效？怎样在锁屏的过程中将自己不想其失效的物件变得有效？
以上都是遗留的问题，需要进一步的学习解决！
