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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
js调试系列 初识控制台
Jun 18 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
Vue仿支付宝支付功能
May 25 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
Javascript实现关闭广告效果
Jan 29 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制作百度词典查词采集器
2015/01/29 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
jquery map方法使用示例
2014/04/23 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python将回车作为输入内容的实例
2018/06/23 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python如何将多个PDF进行合并
2019/08/13 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
土木工程专业个人求职信
2013/12/30 职场文书
预备党员公开承诺书
2014/05/28 职场文书
起诉意见书范文
2015/05/19 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL