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 相关文章推荐
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
微信小程序实现点击生成随机验证码
Sep 09 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
destoon官方标签大全
2014/06/20 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
Js apply方法详解
2017/02/16 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
学习决心书范文
2014/03/11 职场文书
任长霞观后感
2015/06/16 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python