jquery下實現(xiàn)overlay遮罩層代碼
更新時間:2010年08月25日 16:16:58 作者:
下面是個應(yīng)用的小例子用來統(tǒng)一處理ajax請求中利用完全透明遮罩層組織用戶和界面元素交換,當ajax出錯時提示用戶
復(fù)制代碼 代碼如下:
/*
模態(tài)遮罩層單例對象
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;
下面是個應(yīng)用的小例子用來統(tǒng)一處理ajax請求中利用完全透明遮罩層組織用戶和界面元素交換,當ajax出錯時提示用戶
代碼
復(fù)制代碼 代碼如下:
/*統(tǒng)一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 遮罩層實現(xiàn)(mask)實現(xiàn)代碼
- jQuery操作dom實現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
- jQuery阻止移動端遮罩層后頁面滾動
- Jquery實現(xiàn)遮罩層的簡單實例(就是彈出DIV周圍都灰色不能操作)
- jquery實現(xiàn)簡單的遮罩層
- jQuery實現(xiàn)彈出帶遮罩層的居中浮動窗口效果
- jQuery遮罩層實現(xiàn)方法實例詳解(附遮罩層插件)
- jquery實現(xiàn)點擊其他區(qū)域時隱藏下拉div和遮罩層的方法
- 輕量級網(wǎng)頁遮罩層jQuery插件用法實例
- jQuery實現(xiàn)打開網(wǎng)頁自動彈出遮罩層或點擊彈出遮罩層功能示例
- jQuery超簡單遮罩層實現(xiàn)方法示例
相關(guān)文章
jQuery實現(xiàn)dialog設(shè)置focus焦點的方法
這篇文章主要介紹了jQuery實現(xiàn)dialog設(shè)置focus焦點的方法,涉及jQuery針對dialog的操作技巧,需要的朋友可以參考下2015-06-06jQuery-1.9.1源碼分析系列(十一)DOM操作續(xù)之克隆節(jié)點
這篇文章主要介紹了jQuery-1.9.1源碼分析系列(十一)DOM操作續(xù)之克隆節(jié)點的相關(guān)資料,需要的朋友可以參考下2015-12-12jQuery模仿ToDoList實現(xiàn)簡單的待辦事項列表
這篇文章主要介紹了jQuery模仿ToDoList實現(xiàn)簡單的待辦事項列表,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12