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>
Mootools遮罩层练习(原为网上的jquery写法)的更多相关文章
- Android 遮罩层效果
(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...
- html实现弹框，并伴随遮罩层，且弹框居中
本文介绍的内容主要实现的功能有,出现弹框,并且伴随遮罩层,且弹框一直居中. html和js代码: <div id="hidebg"></div> <d ...
- div+css遮罩层
曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...
- java javaScript实现遮罩层 动态加载
通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关 ...
- 简单的ajax遮罩层（加载进度圈）cvi_busy_lib.js
cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- Android 遮罩层效果--制作圆形头像
(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...
- jQuery遮罩层登录对话框
用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...
随机推荐
- hdu1569 方格取数(2) 最大点权独立集=总权和-最小点权覆盖集 (最小点权覆盖集=最小割=最大流)
/** 转自:http://blog.csdn.net/u011498819/article/details/20772147 题目:hdu1569 方格取数(2) 链接:https://vjudge ...
- confirg
如果用户点击确定按钮,则 confirm() 返回 true.如果点击取消按钮,则 confirm() 返回 false.在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入 ...
- hdu 2167(状压dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2167 思路:经典的状压dp题,前后,上下,对角8个位置不能取,状态压缩枚举即可所有情况,递推关系是为d ...
- Angular2 初识
AppComponent 壳的三个实现文件: app.component.ts— 组件的类代码,这是用 TypeScript 写的. app.component.html— 组件的模板,这是用 HTM ...
- iOS-本地沙盒路径
沙盒几个路径: 沙盒里的文件夹包括Documents.Library.tmp.这三个文件夹的作用请点击这里.接下来我们来讲解如何获取Documents.Library.tmp的路径. 获取沙盒根目录 ...
- 56、LeakCanary——直白的展现Android中的内存泄露
转载:http://blog.csdn.net/watermusicyes/article/details/46333925 DEMO下载地址:https://github.com/SOFTPOWER ...
- 在VerilogHDL中调用VHDL的模块
最近忽然要用到在VerilogHDL中调用VHDL的模块,从网上找了例程,把自己会忘掉的东西记在这里,. 2选1多路复用器的VHDL描述:entity mux2_1 is port( dina : i ...
- Audit logon events&Logon type
表一.Logon type 表二.Audit logon events 表三.Logon type details Logon type Logon title Description 2 Inter ...
- 被Chrome下的remove闪了一下腰
有用户反映说购物车删除不了东西,于是有了下面的测试. 浏览器:ie7 ie8 ie9 chrome 代码: <a href="javascript:" onclick=&qu ...
- Struts 上传文件
1. 客户端注意事项 method="post" enctype="multipart/form-data" <input type="file ...