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("请求出错,请刷新页面并稍候再试!") }); }
jquery下实现overlay遮罩层代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@