jquery下实现overlay遮罩层代码


Posted in Javascript onAugust 25, 2010
/* 
模态遮罩层单例对象 
opacity:背景透明度 
1. show() 
2. close() 
*/ 
Q.Overlay = function(opacity) { 
var self = this; 
self._createDiv = function() { if (self._overlay) return; 
self._overlay = $("<div></div>"); 
var overlayCss = { 
'width': '100%', 
'min-height': '100%', 
'position': 'fixed', 
'top': 0, 
'left': 0, 
'z-index': Q.Overlay.zindex, 
'background': '#ccc', 
'text-align': 'center', 
'opacity': opacity 
}; 
if ($.browser.msie && $.browser.version.substr(0, 1) < 7) { 
overlayCss.position = "absolute"; 
overlayCss.height = Q.dom.pageHeight(); 
} 
self._overlay.css(overlayCss); 
$(document.body).append(self._overlay); 
}; 
self.show = function() { 
self._createDiv(); 
Q.Overlay.zindex++; 
self._overlay.show(); 
}; 
self.close = function() { 
self._overlay.hide(); 
self._overlay.remove(); 
self._overlay = undefined; 
}; 
} 
Q.Overlay.zindex = 1000;

下面是个应用的小例子用来统一处理ajax请求中利用完全透明遮罩层组织用户和界面元素交换,当ajax出错时提示用户
代码
/*统一ajax错误处理*/ 
Q.initAjaxErrorHandler = function() { 
var overlay = new Q.Overlay(0.0); 
$(document.body).ajaxStart(function() { overlay.show(); }); 
$(document.body).ajaxSuccess(function() { overlay.close(); }); 
$(document.body).ajaxError(function() { Q.alert("请求出错,请刷新页面并稍候再试!") }); 
}
Javascript 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
3种js实现string的substring方法
Nov 09 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 #Javascript
javascript下string.format函数补充
Aug 24 #Javascript
javascript下利用arguments实现string.format函数
Aug 24 #Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 #Javascript
js null,undefined,字符串小结
Aug 21 #Javascript
javascript中的float运算精度实例分析
Aug 21 #Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 #Javascript
You might like
php 文件状态缓存带来的问题
2008/12/14 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
php之可变变量的实例详解
2017/09/12 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
Seajs的学习笔记
2014/03/04 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
百度地图api如何使用
2015/08/03 Javascript
json的使用小结
2016/06/08 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
Python部署web开发程序的几种方法
2017/05/05 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
大客户销售经理职责
2013/12/04 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
法院执行局工作总结
2015/08/11 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书