摘要:[網頁]整頁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)換成其他語言的提示了~