遮罩锁屏

    看李炎恢JS最后的博客例子，好多内容都很实用。页面遮罩弹出框是挺常见的一种情况，比较普遍。废话少说，直播开始。

    说一下需求：弹出框加载后，周围背景页面变暗（遮罩），且背景页面不可操作（锁屏）。

展示效果：

    点击“登录”，弹id="login"的弹出框。HTML代码如下：

<span style="font-size:18px;"><div class="login">登录</div>
<div id="login">
	<h2><img src="images/close.png" alt="" class="close" />网站登录</h2>
	<div class="user">帐 号：<input type="text" name="user" class="text" /></div>
	<div class="pass">密 码：<input type="password" name="pass" class="text" /></div>
	<div class="button"><input type="button" class="submit" value="" /></div>
	<div class="other">注册新用户 | 忘记密码？</div>
</div>
<div id="screen"></div>
</span>

    主要的css代码如下：

<span style="font-size:18px;">#screen {
	position:absolute;
	top:0;
	left:0;
	background:#000;
	z-index:9998;
	filter:alpha(opacity=30);
	opacity:0.3;
	display:none;
}
#login {
	width:350px;
	height:250px;
	border:1px solid #ccc;
	position:absolute;
	display:none;
	z-index:9999;
	background:#fff;
}</span>

    JS代码如下：

<span style="font-size:18px;"><script type="text/javascript">
window.onload = function () {
var login = $().getId('login');
//点击登录，弹出登录框
$().getClass('login').click(function () {
		login.css('display', 'block');
		screen.lock();
	});
//点击关闭，隐藏弹出框
$().getClass('close').click(function () {
		login.css('display', 'none');
		screen.unlock();
	});
}
//每次实例化
var $ = function (_this) {
	return new Base(_this);
}
//基础库
function Base(_this) {
	//创建一个数组，来保存获取的节点和节点数组
	this.elements = [];
	if (_this != undefined) {    //_this是一个对象，undefined也是一个对象，区别与typeof返回的带单引号的'undefined'
		this.elements[0] = _this;
	}
}
//设置显示
Base.prototype.show = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.display = 'block';
	}
	return this;
}
//设置隐藏
Base.prototype.hide = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.display = 'none';
	}
	return this;
}
//锁屏
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;
}
</script>
</span>

    每个小例子都会有大作用，easyUI中好像有自带的弹出框的遮罩锁屏功能，继续fighting了。