7.项目 1-博客前端：封装库--遮罩锁屏

学习要点：
1.界面设计
2.设置效果

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

一．界面设计

创建一个登录界面，如下图。

QQ截图20190513094754.png

二．设置效果

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

filter: alpha(Opacity=30); //IE 透明度
opacity:0.30; //非 IE 透明度
z-index:9998; //层高度
//锁屏功能
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';
}
}

第二步：锁屏之后，我们点击关闭窗口还需要解出锁屏。

//解锁功能
Base.prototype.unlock = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'none';
}
}

第三步：当进行缩放的时候，必须注意锁屏的画布需要同时缩放。

var screen = $().getId('screen');
login.center(350, 250).resize(function () {
login.center(350, 250);
if (login.css('display') == 'block') {
screen.lock();
}
});

第四步：火狐使用 innerWidth，不支持的使用 document.documentElement.clientWidth。

PS：因为火狐浏览器使用 document.documentElement.clientWidth 会在缩放的时候出现白
边。把使用两次以上或者估计以后会有两次的，或者是为了代码清晰度，可以分层封装。

感谢收看本次教程！