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中的Split使用方法与技巧
Mar 09 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 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
用Flash图形化数据(一)
2006/10/09 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
Vue表单实例代码
2016/09/05 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
python 连续不等式语法糖实例
2020/04/15 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
办公室内勤工作职责
2013/12/11 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
12月红领巾广播稿
2014/02/13 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
golang json数组拼接的实例
2021/04/28 Golang
vue选项卡切换的实现案例
2022/04/11 Vue.js
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS