<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写法)的更多相关文章

  1. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  2. html实现弹框，并伴随遮罩层，且弹框居中

    本文介绍的内容主要实现的功能有,出现弹框,并且伴随遮罩层,且弹框一直居中. html和js代码: <div id="hidebg"></div> <d ...

  3. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  4. java javaScript实现遮罩层 动态加载

    通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关 ...

  5. 简单的ajax遮罩层（加载进度圈）cvi_busy_lib.js

    cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

  6. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  7. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  8. Android 遮罩层效果--制作圆形头像

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  9. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

随机推荐

  1. 偶遇 sqlserver 参数嗅探

    需求: 费用统计 环境: 查询设计多张大表 解决方案: 优化查询语句,封装成存储过程,建立索引,最终查询速度很不错.部署上线,告一段落... 一段时间后投诉来了... 客户投诉说查询没内容,我看了日志 ...

  2. 批量上传文件到HDFS的Shell脚本

    在做Hadoop数据挖掘项目的时候,我们第一步是源数据的获取,即把相应的数据放置到HDFS中,以便Hadoop进行计算,手动将文件上传到HDFS中,未免太费时费力,所以我们可以采取像Flume一样的框 ...

  3. 【转】【Mysql学习】之Mac上用终端使用mySQL

    收藏了几篇文章,以供查阅: 在此感谢: m0_38017925:<Mac上用终端使用mySQL> xiamu03:<在MacOS上使用终端操作数据库>

  4. 01 Servlet & Jsp 技术概述

    Servlet 介绍 servlet 是运行在web服务器或应用服务器上的java程序, 它是一个中间层, 负责连接来自web浏览器或其他http客户端的请求和HTTP服务器上的数据库或应用程序. 为 ...

  5. HBase之HFile解析

    Sumary: Protobuf BinarySearch 本篇主要讲HFileV2的相关内容,包括HFile的构成.解析及怎么样从HFile中快速找到相关的KeyValue.基于Hbase 0.98 ...

  6. storm 入门原理介绍_AboutYUN

    转自:http://www.aboutyun.com/thread-7394-1-1.html 了解Storm:http://www.aboutyun.com/thread-9547-1-2.html ...

  7. 使用 Notepad 或 TextEdit 来编写 HTML

    可以使用专业的 HTML 编辑器来编辑 HTML: Adobe Dreamweaver Microsoft Expression Web CoffeeCup HTML Editor 不过,我们同时推荐 ...

  8. Python_selenium之窗口切换（二）

    Python_selenium之窗口切换(二)一.思路拆分1. 之前有介绍窗口切换,这里加上断言部分2. 这里还是以百度新闻为例,获取百度新闻网址http://news.baidu.com/3. 同样 ...

  9. ios --转载-从URL中截取所包含的参数,并且以字典的形式返回和参数字典转URL

    - (NSString *)keyValueStringWithDict:(NSDictionary *)dict { if (dict == nil) { return nil; } NSMutab ...

  10. Docker入门与应用系列（七）Docker图形界面管理之DockerUI

    1.dockeruiDockerrUI是一个基于Docker API提供图形化页面简单的容器管理系统,支持容器管理.镜像管理.1.1 下载镜像 docker pull abh1nav/dockerui ...