html锁屏遮罩,遮罩锁屏

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

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

展示效果：

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

登录

网站登录

帐 号：

密 码：

注册新用户 | 忘记密码？

主要的css代码如下：

#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;

}

JS代码如下：

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;

}

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