JavaScript实践——博客前端：封装库-遮罩锁屏

前言

  这个是JavaScript视频教程中的小项目中的一个小部分，在之前实现了点击登录按钮时弹出登录框，现在要实现对弹出的窗口进行强调突出表现，所以就需要对周围的元素进行遮罩，并且周围的元素不可以进行操作，这就需要进行锁屏了，看看具体怎么实现？

步骤

  1.创建一个可以布满整个浏览器的div

<div id="screen"></div>  2.设置CSS 在login之前设置
#screen {
position:absolute;
top:0;
left:0;
background:#000;
z-index:9998; /* 层高度 */
filter:alpha(opacity=30); /* IE透明度 */
opacity:0.3; /* 非IE透明度 */
display:none;
}
#login {
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute;
display:none;
z-index:9999;
background:#fff;
}  3.兼容浏览器 分层封装
//跨浏览器获取视口大小
function getInner() {
if (typeof window.innerWidth != 'undefined') {
return {
width : window.innerWidth,
height : window.innerHeight
}
} else {
return {
width : document.documentElement.clientWidth,
height : document.documentElement.clientHeight
}
}
}
  4.锁屏功能

//锁屏功能
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;
};
//解锁功能
Base.prototype.unlock = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'none';
}
return this;
}

  5.效果

小结

 
按照视频中的讲述一步步实现，最终实现出所要的效果，还是略有成就感的！