jquery下實(shí)現(xiàn)overlay遮罩層代碼
更新時(shí)間:2010年08月25日 16:16:58 作者:
下面是個(gè)應(yīng)用的小例子用來統(tǒng)一處理ajax請求中利用完全透明遮罩層組織用戶和界面元素交換,當(dāng)ajax出錯(cuò)時(shí)提示用戶
復(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;
下面是個(gè)應(yīng)用的小例子用來統(tǒng)一處理ajax請求中利用完全透明遮罩層組織用戶和界面元素交換,當(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("請求出錯(cuò),請刷新頁面并稍候再試!") });
}
您可能感興趣的文章:
- 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)文章
jQuery ready()和onload的加載耗時(shí)分析
這篇文章主要介紹了jQuery ready()和onload的加載耗時(shí),結(jié)合實(shí)例形式對比分析了jQuery中的ready()和JavaScript的window.onload進(jìn)行頁面加載的時(shí)間,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)dialog設(shè)置focus焦點(diǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)dialog設(shè)置focus焦點(diǎn)的方法,涉及jQuery針對dialog的操作技巧,需要的朋友可以參考下2015-06-06jquery實(shí)現(xiàn)導(dǎo)航固定頂部的效果仿蘑菇街
這篇文章主要介紹了jquery實(shí)現(xiàn)導(dǎo)航固定頂部的效果,仿蘑菇街的,感覺還不錯(cuò),下面將實(shí)例與大家分享下2014-10-10jQuery-1.9.1源碼分析系列(十一)DOM操作續(xù)之克隆節(jié)點(diǎn)
這篇文章主要介紹了jQuery-1.9.1源碼分析系列(十一)DOM操作續(xù)之克隆節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2015-12-12jQuery模仿ToDoList實(shí)現(xiàn)簡單的待辦事項(xiàng)列表
這篇文章主要介紹了jQuery模仿ToDoList實(shí)現(xiàn)簡單的待辦事項(xiàng)列表,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12Jquery日期選擇datepicker插件用法實(shí)例分析
這篇文章主要介紹了Jquery日期選擇datepicker插件用法,實(shí)例分析了datepicker插件的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06