[網頁]整頁Loading(讓使用者Waiting且不能做其他操作)

  • 4652
  • 0

摘要:[網頁]整頁Loading(讓使用者Waiting且不能做其他操作)

其實是因為找到國外的方法而加工的:http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation

一樣,在你的body最下方加入要顯示的樣子(我的是文字加圖片):

 


<div class="modal"><div align="center" style="height:50%;"></div><div align="center">The device be added, please wait for ready.</div><div><img src="images/load.gif" /></div></div>
其中load.gif就是用ajaxload generator:http://www.ajaxload.info/
 
之所以有個莫名的div只是為了置中,有更好方法的朋友可以替換掉~
 
 
 
接著在css加入以下樣式:
 

body.loading {
    overflow: hidden;   
}
body.loading .modal {
    display: block;
}
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
   color: 		#000000;
   text-align:	center;
   background: rgba( 255, 255, 255, .8 );          
}
後面的.8就是0.8,是Alpha值。
 
最後用javascript或jQuery在需要的時候將loading樣式加到body或你想要的區域上(若只想要部分顯示):
 
 
$body = $("body");
$body.addClass("loading");
結果就像這樣:
因為我的網頁還要做語言轉換,
所以這樣子就可以用修改html(或innerHTML)換成其他語言的提示了~