在中心制作更新進度面板

Question

我對更新進度面板有疑問。 我想在屏幕中間安裝更新進度面板，有人可以建議我嗎？ 這樣做的想法是什么？

Answer 1

您可以使用 css 來做到這一點

<style type="text/css" media="screen">
/* commented backslash hack for ie5mac \*/ 
html, body{height:100%;} 
/* end hack */
.CenterPB{
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px; /* make this half your image/element height */
margin-left: -30px; /* make this half your image/element width */
}
</style>

並且您在 div 中有進度條

<div class="CenterPB" style="height:60px;width:60px;" >Progress bar here</div>

參考：
http://www.sitepoint.com/forums/1243542-post9.html
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/

Answer 2

系統正在處理時，更新進度面板會顯示一些內容（一些文本、圖像、一些標記）。

所以你需要使用你添加的標記..

例如，如果你有一個顯示的 div，你可以讓它像這樣在中心。

<div style="width:200px;margin:0 auto;">Processing...</div>

這將在其容器的中心顯示 div。

完整示例：

<asp:UpdatePanel ID="updatepnl1" runat="server">
    <ContentTemplate>
        <asp:GridView id="gv1" runat="server">
        </asp:GridView>
        <asp:UpdateProgress id="UpdateProg" runat="server">
            <ProgressTemplate>
                <div style="width:200px;margin:0 auto;">Processing...</div>
            </ProgressTemplate>
        </asp:UpdateTemplate>
    </asp:ContentTemplate>
</asp:UpdatePanel>

當然，您應該將 css 放入 css 文件並將其應用於 class。

喜歡：

///Start css

.posCentre{width:200px;margin:0 auto;}

///End css

並將您的 div 更改為：

<div class="posCentre">Processing...</div>

Answer 3

如果您使用 jQuery，您也可以嘗試（非常輕量級的）固定中心插件。