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>
