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.效果

小结

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