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 相关文章推荐
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
JS实现简易贪吃蛇游戏
Aug 24 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
投票管理程序
2006/10/09 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
php下将XML转换为数组
2010/01/01 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
React数据传递之组件内部通信的方法
2017/12/31 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
用python实现名片管理系统
2020/06/18 Python
python中PyQuery库用法分享
2021/01/15 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
工作会议欢迎词
2014/01/16 职场文书
运动会通讯稿150字
2014/02/15 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
高中班级口号
2014/06/09 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python