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 相关文章推荐
JS刷新框架外页面七种实现代码
Feb 18 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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/06/29 PHP
浅谈php7的重大新特性
2015/10/23 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python中的zip函数使用示例
2015/01/29 Python
python相似模块用例
2016/03/04 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
学校班班通实施方案
2014/06/11 职场文书
好的旅游活动方案
2014/08/19 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书