jquery下实现overlay遮罩层代码 |
本文标签:overlay,遮罩层 复制代码 代码如下: /* 模态遮罩层单例对象 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("请求出错,请刷新页面并稍候再试!") }); } |