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 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
在网页中使用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
PR值查询 | PageRank 查询
2006/12/20 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
实例讲解JS中pop使用方法
2019/01/27 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
通信工程专业毕业生推荐信
2013/12/25 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
环保倡议书400字
2014/05/15 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
投资入股合作协议书
2014/10/28 职场文书
教师岗位职责
2015/02/03 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python