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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
Javascript 构造函数 实例分析
Nov 26 Javascript
两个Javascript小tip资料
Nov 23 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
在网页中使用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/10/03 PHP
php 中文和编码判断代码
2010/05/16 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python使用gRPC传输协议教程
2018/10/16 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
医学专业大学生求职信
2014/07/12 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书