基于jquery的loading 加載提示效果實現代碼
更新時間：2011年09月01日 21:03:06 作者：
有時候為了更好的用戶體驗，使用jquery的朋友可以參考下代碼。
loading 加載提示 ······ 透明遮罩 居中
body{
margin: 0;
font-size: 12px;
line-height: 100%;
font-family: Arial, sans-serif;
}
.background {
display: block;
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
background:while;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
.progressBar {
border: solid 2px #86A5AD;
background: white url(progressBar_m.gif) no-repeat 10px 10px;
}
.progressBar {
display: block;
width: 148px;
height: 28px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -74px;
margin-top: -14px;
padding: 10px 10px 10px 50px;
text-align: left;
line-height: 27px;
font-weight: bold;
position: absolute;
z-index: 2001;
}
<div id="background" class="background" style="display: none; "></div>
<div id="progressBar" class="progressBar" style="display: none; ">數據加載中，請稍等...</div>
var ajaxbg = $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function () {
ajaxbg.show();
}).ajaxStop(function () {
ajaxbg.hide();
});
作者：曾祥展
復制代碼 代碼如下:
body{
margin: 0;
font-size: 12px;
line-height: 100%;
font-family: Arial, sans-serif;
}
.background {
display: block;
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
background:while;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
.progressBar {
border: solid 2px #86A5AD;
background: white url(progressBar_m.gif) no-repeat 10px 10px;
}
.progressBar {
display: block;
width: 148px;
height: 28px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -74px;
margin-top: -14px;
padding: 10px 10px 10px 50px;
text-align: left;
line-height: 27px;
font-weight: bold;
position: absolute;
z-index: 2001;
}
<div id="background" class="background" style="display: none; "></div>
<div id="progressBar" class="progressBar" style="display: none; ">數據加載中，請稍等...</div>
var ajaxbg = $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function () {
ajaxbg.show();
}).ajaxStop(function () {
ajaxbg.hide();
});
作者：曾祥展
相關文章
現在很多朋友都喜歡使用jquery了，所以很多的表格判斷都是基于jquery的，但實現方法與javascript原生代碼不同，對于checkbox的判斷大家可以參考下。2010-10-10
本文給大家介紹jquery選擇器的相關知識，并通過案例給大家介紹jquery知識，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
有個需求就是異步驗證用戶名是否存在。用的技術是jQuery異步驗證和struts2，大家可以參考下2014-05-05
在前臺的表格中單擊單元格便可修改其中的內容，回車鍵保存修改的內容，esc撤銷保存的內容2014-05-05
本文主要介紹了用的jqueryRotate插件實現轉盤抽獎功能的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
jQuery實現分頁功能（含ajax請求、后臺數據、附完整demo）
這篇文章主要給大家介紹了關于jQuery實現分頁功能的相關資料，主要包含ajax請求和后臺數據，文末給出了完整的demo示例，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了jQuery獲取復選框選中的當前行的某個字段的值,需要的朋友可以參考下2017-09-09
jQuery EasyUI 提供易于使用的組件，它使 Web 開發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面。通過本文給大家介紹JQuery+EasyUI輕松實現步驟條效果，需要的朋友參考下2016-02-02
這篇文章主要為大家詳細介紹了jQuery動態(tài)追加頁面數據以及事件委托的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了jquery實現簡單的彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10