jquery下实现overlay遮罩层代码
更新时间：2010年08月25日 16:16:58 作者：
下面是个应用的小例子用来统一处理ajax请求中利用完全透明遮罩层组织用户和界面元素交换，当ajax出错时提示用户
复制代码 代码如下:
/*
模态遮罩层单例对象
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("请求出错，请刷新页面并稍候再试！") });
}
相关文章
这篇文章主要介绍了jQuery-each()方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
很多数据统计效果中，柱状条方式的算是比较常见的一种，形象直观，下面就是一段能够实现此功能的代码实例，并且具有一定的动态效果，感兴趣的朋友可以参考一下2016-02-02
jquery的checkbox,radio,select等方法小结
jquery的checkbox，radio，和select是jquery操作的一个难点和重点，很多前端新手对其了解不是很透彻。时间久了不用，我在写的时候有时也难免对某些操作支支吾吾，记不清楚，现在，对其做一些简单的总结2016-08-08
jQuery UI Datepicker length为空或不是对象错误的解决方法
jQuery UI Datepicker length为空或不是对象错误的解决方法,需要的朋友可以参考下。2010-12-12
这篇文章主要介绍了jQuery实现幻树形下拉菜单特效，代码简单，非常具有实用价值，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了使用jQuery UI库开发Web界面的简单入门指引,jQuery UI是一个基于jQuery的图形组件库,需要的朋友可以参考下2016-04-04
:nth-child(index)子元素过滤选择器的描述是：选取每个父元素下的弟index个子元素，index从1开始。2011-07-07
这篇文章主要为大家详细介绍了如何基于cookie实现zTree树刷新后，展开状态不变，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
jquery ajax的执行顺序大家在项目经常会颠倒，下面通过本文给大家介绍jquery ajax的执行顺序，涉及到jquery ajax执行顺序相关知识，对jquery ajax执行顺序相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了jQuery实现默认是闭合的FAQ展开效果菜单,涉及jQuery中slideUp及slideDown用法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
最新评论