雖然 VISUAL STUDIO 有提供 UpdateProgress 可以使用,而且也會在更新時出現,更新後就消失,但總覺得顯示的位置不太好控制,所以就乾脆把整個畫面都變色,這樣就可以達到提醒的作用了,方法如下,將 updateprogress 裡面放上想要顯示的字或 gif,然以用 span 將它包起來,然後再用另一個 div,將全部包起來,再用 css 的效果顯示半透明色和調整位置。
Sample.aspx
<style>
.LoadingCover {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
color: white;
font-size: 20px;
line-height: 100%;
background: rgba(0%,0%,0%,0.6);
z-index: 998;
}
.LoadingContent {
width: 200px;
height: 100px;
position: relative;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
</style>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
<ContentTemplate>
要更新的內容
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="LoadingCover">
<span class="LoadingContent">Loading...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>