ajax请求等待中简单锁屏

所属分类：[界面编程] | 创建时间：2014-06-18 | 文章属性：原创 | 文章来源：http://windfly.cn | 作者：windfly

##使用场景
>ajax提交表单,如果不锁屏,可能会导致多次点击重复提交

##锁屏效果
>1. 不使用复杂框架,只使用原生js简单锁屏.  
1. 只需要半透明遮罩,在屏幕中间粗体显示加载中字样  
1. 加入简单动画  
1. 加锁时屏蔽键盘事件,在去锁后,恢复事件

##js代码

```
(function(window){
	var _simpleLock={};
	var onkeydowntempfunc;
	_simpleLock.lock = function (){
	    onkeydowntempfunc = document.onkeydown;
	    document.onkeydown = function() {
	        return false;
	    };
	    var d = document.getElementById("_screen_lock_");
	    if (d) {
	        return;
	    }
	    var a = document.createElement("div");
	    a.id = "_screen_lock_";
	    a.innerHTML = '<div style="position: absolute;top: 50%;left: 50%;font-weight: bold;width:45px;">加载中<marquee direction=right>>>></marquee></div>';
	    a.style.backgroundColor = "lightGray";
	    a.style.position = "absolute";
	    a.style.width = "100%";
	    a.style.height = "100%";
	    a.style.zIndex = 999;
	    a.style.opacity = 0.7;
	    a.style.filter="alpha(opacity=70)"; 
	    a.style.top = 0;
	    a.style.left = 0;
	    document.body.appendChild(a);
	};
	_simpleLock.unlock = function() {
	    document.onkeydown = onkeydowntempfunc;
	    var d = document.getElementById("_screen_lock_");
	    if (d) {
	        d.parentNode.removeChild(d);
	    }
	};
	window.simpleLock = _simpleLock;
})(window);

```
###调用方法
`simpleLock.lock();`和`simpleLock.unlock();`