Mootools遮罩层练习(原为网上的jquery写法)

<html >

<head>

<meta charset="utf-8" />

<title>mootools 遮罩层</title>

<meta name="author" content="whellote" />

<style>

#pageOverlay { visibility:hidden; position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }

</style>

<script src="http://cdn.bootcss.com/mootools/1.5.1/mootools-core-full-compat.js"></script>

</head>

<body>

<div id="pageOverlay"></div>

<button id="open_ajax">模拟ajax触发</button>

<script>

var getPage = function(){

var dd = document.documentElement,

db = document.body;

return {

left: Math.max(dd.scrollLeft, db.scrollLeft),

top: Math.max(dd.scrollTop, db.scrollTop)

};

};

/*

var keyValidate = function(e){

key = e.code;

if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 9) || (key == 38) || (key == 40)) {

return true;

}

}

*/

var lock = {

eventReturn : function(e){

return false;

},

mouseEventArray : [

'DOMMouseScroll',

'mousewheel',

'scroll',

'contextmenu',

],

keyEventArray : [

'keyup',

'keydown',

'keypress',

],

doAddEvent : function(eventArr){

var eventType = eventArr;

for(var i = 0; i < eventType.length; i++){

document.addEvent(eventType[i],this.eventReturn);

}

},

doRemoveEvent : function(eventArr){

var eventType = eventArr;

for(var i = 0; i < eventType.length; i++){

document.removeEvent(eventType[i],this.eventReturn);

}

},

open : function(){

$('pageOverlay').style.visibility = 'visible';

this.doAddEvent(this.mouseEventArray);

this.doAddEvent(this.keyEventArray);

},

close : function(){

$('pageOverlay').style.visibility = 'hidden';

this.doRemoveEvent(this.mouseEventArray);

this.doRemoveEvent(this.keyEventArray);

}

};

$('open_ajax').addEvent('click', function(e){

lock.open();

});

$('pageOverlay').addEvent('click', function(e){

lock.close();

});

</script>

</body>

</html>