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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
Chrome Web App开发小结
2014/09/04 PHP
laravel自定义分页效果
2017/07/23 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python生成九宫格图片
2018/11/19 Python
python制作抽奖程序代码详解
2021/01/15 Python
会计自荐书
2013/12/02 职场文书
销售提升方案
2014/06/07 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
新教师个人总结
2015/02/06 职场文书
公司市场部岗位职责
2015/04/15 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
党支部意见范文
2015/06/02 职场文书
DIY胆机必读:各国电子管评价
2022/04/06 无线电