基于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.messager.js插件導致頁面抖動的解決方法
這盤文章介紹了jquery.messager.js插件導致頁面抖動的解決方法,有需要的朋友可以參考一下2013-07-07
jQuery綁定點擊事件與改變事件的方式總結及多個元素綁定多個事件
我們一說到jQuery中對于元素的修改,就是元素的內容、屬性、樣式的修改,下面這篇文章主要給大家介紹了關于jQuery綁定點擊事件與改變事件的方式總結及多個元素綁定多個事件的相關資料,需要的朋友可以參考下2022-12-12

