在页面中间显示 Ajax UpdateProgress答案

【问题标题】：Display Ajax UpdateProgress in the middle of the Page在页面中间显示 Ajax UpdateProgress
【发布时间】：2011-06-04 00:53:36
【问题描述】：

我正在使用 Ajax UpdateProgress 控件。虽然它的工作方式与我预期的一样，但我希望它出现在页面的中心。我该怎么做

<asp:UpdateProgress runat="server"
      id="PageUpdateProgress" DisplayAfter=0
      DynamicLayout=true>
   <ProgressTemplate>
      <div>
         <img src="../Images/load.gif" />           
     </div>
   </ProgressTemplate>
</asp:UpdateProgress>

【问题讨论】：

标签： asp.net asp.net-ajax

【解决方案1】：

感谢 Jaidev，非常方便的帖子！

把css弄好可能需要一段时间，所以只是为了简化其他人的解决方案，你只需要以下（用于updateprogress中间定位）：

<div style="position:absolute; width:100%;height:100%;"></div>

对于图片：

<img style="position:relative; top:45%;" />

【讨论】：

【解决方案2】：

在你的 div 中使用这种风格：

style="position:absolute;visibility:visible;border:none;z-index:100;width:100%;height:100%;background:#999;filter: alpha(opacity=80);-moz-opacity:.8; opacity:.8;"

并在你的 img 中使用这种风格：

style="top:48%; left:42%; position:relative;"

【讨论】：

【解决方案3】：

试试这个：

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate >
        <div id="dvProgress" runat="server" style="position:absolute; top: 300px;
                                                   left: 550px; text-align:center;">
            <asp:Image ID="Image2" runat="server" Height="46px" Width="47px" 
                       ImageUrl="~/App_Themes/Default/Images/wait_ax.gif"  />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

【讨论】：

【解决方案4】：

使用 ModalPpoupExtender 并将目标控件设置为更新进度

<cc1:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="PageUpdateProgress"
            PopupControlID="PageUpdateProgress" BackgroundCssClass="modalback" runat="server">
        </cc1:ModalPopupExtender>

【讨论】：

【解决方案5】：

将您的 CSS 属性设置为百分比。

在第二个 div 中：

设置 background-image: url('[Path to your image]').
相应地设置顶部、左侧、高度、宽度；顶部 =（100 高度）/2，左侧 =（100 宽度）/2

在两个 div 中，检查 z-index 是否设置在其他内容之上。

在 IE 中工作...

<asp:UpdateProgress ID="updateProgress" runat="server" DynamicLayout="true">
    <ProgressTemplate>

            <div style="position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; padding: 0; margin: 0; background-color: #F0F0F0; filter: alpha(opacity=50); opacity: 0.5; z-index: 100000;"></div>

            <div style="position: fixed; top: 40%; left: 40%; height:20%; width:20%; z-index: 100001;  background-color: #FFFFFF; border:2px solid #000000; background-image: url('../../Images/ajax-loader-big.gif'); background-repeat: no-repeat; background-position:center;"></div>

        </ProgressTemplate>
</asp:UpdateProgress>

【讨论】：

【解决方案6】：

我在我的项目中使用了这段代码。

ASPX：

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="100" DynamicLayout="true" >
  <ProgressTemplate>
    <div class="update">
    </div>
  </ProgressTemplate>
</asp:UpdateProgress>

CSS：

/* UPDATEPANEL PROGRESS : masque lors du chargement des résultats */
.update
{
position: fixed;
top: 0px;
left: 0px;
min-height: 100%;
min-width: 100%;
background-image: url("Images/Loading.gif");
background-position:center center;
background-repeat:no-repeat;
background-color: #e4e4e6;
z-index: 500 !important;
opacity: 0.8;
overflow: hidden;
}

【讨论】：

【解决方案7】：

您也可以使用UpdatePanelAnimationExtender，例如停用触发提交事件的控件。

【讨论】：

【解决方案8】：

我已经尝试过这段代码，它可以在 IE 和 Chrome 中运行：

        <asp:UpdateProgress runat="server">
            <ProgressTemplate>
                <div class="Modal">
                    <img src="/img/load.gif" class="Loadin" />
                </div>
                <style>
                    .Modal {
                        position: fixed;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(6, 0, 137, 0.40);
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                    }
                    .Loadin {
                        position: relative;
                        top: 50%;
                        right: 50%;
                    }
                </style>
            </ProgressTemplate>
        </asp:UpdateProgress>

【讨论】：