Question

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

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

Answer 1

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

让css恰到好处可能需要一段时间，所以为了简化其他人的解决方案，你只需要以下内容（对于updateprogress中间定位）：

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

和图片：

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

Answer 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;"

Answer 3

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

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

Answer 4

试试这个：

<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>

Answer 5

将CSS属性设置为百分比。

在第二个div中：

设置background-image：url（'[图片的路径]）。
相应地设置顶部，左侧，高度，宽度; top =（100-height）/ 2，left =（100-width）/ 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>

Answer 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;
}

Answer 7

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

Answer 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>

在页面中间显示Ajax UpdateProgress

8 个答案: