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与其它库冲突的解决方法
Jun 25 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
浅谈js中的this问题
Aug 31 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
js闭包的9个使用场景
Dec 29 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语言流程控制中的主动与被动
2012/11/05 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
js滚动条回到顶部的代码
2011/12/06 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
javaScript基础详解
2017/01/19 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python paramiko模块的使用示例
2018/04/11 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
python爬虫添加请求头代码实例
2019/12/28 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
行政经理的岗位职责
2013/11/23 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
五年级英语教学反思
2014/01/31 职场文书
物流专业求职信
2014/06/30 职场文书
信用卡工资证明范本
2014/10/17 职场文书
2014年班务工作总结
2014/12/02 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
MySQL COUNT函数的使用与优化
2021/05/10 MySQL