欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jquery下实现overlay遮罩层代码

时间:2021-10-15 08:21:51|栏目:jquery|点击:
复制代码 代码如下:

/*
模态遮罩层单例对象
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事件blur()方法的使用实例讲解

栏    目:jquery

下一篇:jquery在项目中做复选框时遇到的一些问题笔记

本文标题:jquery下实现overlay遮罩层代码

本文地址:http://www.codeinn.net/misctech/180080.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有