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动态调整iframe高度的代码
Apr 10 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
Vue实现一个无限加载列表功能
Nov 13 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 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
PHP教程 基本语法
2009/10/23 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
jQuery代码优化 选择符篇
2011/11/01 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python实现扫描日志关键字的示例
2018/04/28 Python
django 修改server端口号的方法
2018/05/14 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python如何基于redis实现ip代理池
2020/01/17 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
店长岗位的工作内容
2013/11/12 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
迎元旦广播稿
2014/02/22 职场文书
管理建议书范文
2014/05/13 职场文书
白银帝国观后感
2015/06/17 职场文书