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 相关文章推荐
Jquery中增加参数与Json转换代码
Nov 20 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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
截获网站title标签之家内容的例子
2006/10/09 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
Javascript实现找不同色块的游戏
2017/07/17 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python try 异常处理(史上最全)
2019/03/07 Python
使用python绘制二维图形示例
2019/11/22 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
大学生的应聘自我评价
2013/12/13 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
应届生求职信范文
2014/05/26 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
2014年德育工作总结
2014/11/20 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
运动会5000米加油稿
2015/07/21 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python