jquery下實(shí)現(xiàn)overlay遮罩層代碼
更新時(shí)間：2010年08月25日 16:16:58 作者：
下面是個(gè)應(yīng)用的小例子用來統(tǒng)一處理ajax請(qǐng)求中利用完全透明遮罩層組織用戶和界面元素交換，當(dāng)ajax出錯(cuò)時(shí)提示用戶
復(fù)制代碼 代碼如下:
/*
模態(tài)遮罩層單例對(duì)象
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;
下面是個(gè)應(yīng)用的小例子用來統(tǒng)一處理ajax請(qǐng)求中利用完全透明遮罩層組織用戶和界面元素交換，當(dāng)ajax出錯(cuò)時(shí)提示用戶
代碼
復(fù)制代碼 代碼如下:
/*統(tǒng)一ajax錯(cuò)誤處理*/
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("請(qǐng)求出錯(cuò)，請(qǐng)刷新頁面并稍候再試！") });
}
您可能感興趣的文章:
- JQuery 遮罩層實(shí)現(xiàn)(mask)實(shí)現(xiàn)代碼
- jQuery操作dom實(shí)現(xiàn)彈出頁面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
- jQuery阻止移動(dòng)端遮罩層后頁面滾動(dòng)
- Jquery實(shí)現(xiàn)遮罩層的簡單實(shí)例(就是彈出DIV周圍都灰色不能操作)
- jquery實(shí)現(xiàn)簡單的遮罩層
- jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果
- jQuery遮罩層實(shí)現(xiàn)方法實(shí)例詳解(附遮罩層插件)
- jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法
- 輕量級(jí)網(wǎng)頁遮罩層jQuery插件用法實(shí)例
- jQuery實(shí)現(xiàn)打開網(wǎng)頁自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能示例
- jQuery超簡單遮罩層實(shí)現(xiàn)方法示例
相關(guān)文章
今天主要總結(jié)一下jQuery操作元素屬性的一些知識(shí)，學(xué)習(xí)jquery的朋友可以參考下2010-02-02
取消選中單選框radio，第一種，第二種方式是使用jQuery實(shí)現(xiàn)的，第三種方式是基于JS和DOM實(shí)現(xiàn)的，大家可以看看下面的示例2014-09-09
下面小編就為大家?guī)硪黄猨query獲取復(fù)選框的值的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05![前端開發(fā)部分總結(jié)[兼容性、DOM操作、跨域等]（持續(xù)更新）](http://img.jbzj.com/images/xgimg/bcimg3.png)
前端開發(fā)部分總結(jié)[兼容性、DOM操作、跨域等]（持續(xù)更新）
在公司做這個(gè)項(xiàng)目已經(jīng)6個(gè)多月了，總結(jié)一些問題，也算是拋磚引玉吧，希望更多的朋友一起分享一些技巧。2010-03-03
用jQuery制作模擬下拉框 瀏覽器自帶的 下拉框樣式不好看。在ie6下，下拉框的優(yōu)先級(jí)大于層，經(jīng)常導(dǎo)致下拉框顯示在層的上面。2010-03-03
jquery中的查找parents與closest方法之間的區(qū)別
這篇文章主要是對(duì)jquery中的查找parents與closest方法之間的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了jQuery中$.each使用詳解,需要的朋友可以參考下2015-01-01
jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止
這篇文章主要介紹了jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止的方法,需要的朋友可以參考下2014-04-04
不好意思，剛剛發(fā)了一個(gè)類似的效果，發(fā)現(xiàn)代碼比較多，而卻還有一個(gè)bug，現(xiàn)在修正了錯(cuò)誤，需要的朋友可以參考下。2011-07-07
jQuery實(shí)現(xiàn)獲取form表單內(nèi)容及綁定數(shù)據(jù)到form表單操作分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取form表單內(nèi)容及綁定數(shù)據(jù)到form表單操作,結(jié)合jQuery封裝插件操作分析了jQuery針對(duì)form表單的serializeJson數(shù)據(jù)獲取及setForm數(shù)據(jù)綁定相關(guān)操作技巧,需要的朋友可以參考下2018-07-07