源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery下实现overlay遮罩层代码

  • 时间:2022-05-04 10:45 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery下实现overlay遮罩层代码
[u]复制代码[/u] 代码如下:
/* 模态遮罩层单例对象 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出错时提示用户 代码
[u]复制代码[/u] 代码如下:
/*统一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("请求出错,请刷新页面并稍候再试!") }); }
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部