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 相关文章推荐
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
JS编程小常识很有用
2012/11/26 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
koa-router源码学习小结
2018/09/07 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python FTP操作类代码分享
2014/05/13 Python
python实现查询苹果手机维修进度
2015/03/16 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
高一历史教学反思
2014/01/13 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
房地产广告策划方案
2014/05/15 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书