在页面中间显示Ajax UpdateProgress

Question

I am using the Ajax UpdateProgress control. Though it is working just as I expected it to work, I want it to appear at the center of the page. How do I do that

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

Answer 1

Thanks Jaidev, Very handy post!

It can take a while to get the css just right, so just to simplify the solution for everyone else, you only need the following (for updateprogress middle-positioning):

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

and for the image:

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

Answer 2

use this style in your 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;"

and use this style in your img:

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

Answer 3

Try this:

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

Set your CSS properties as percentages.

In the second div:

1. Set background-image: url('[Path to your image]').
2. Set top, left, height, width accordingly; top = (100-height)/2, left = (100-width)/2

In both divs, check the z-index is set above other content.

Works in 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 5

I used in my project this code.

The ASPX :

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

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

Use ModalPpoupExtender and set the target control to the update progress

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

Answer 7

您还可以使用UpdatePanelAnimationExtender和ig停用触发提交事件的控件。

Answer 8

I have tried this code and it works in IE and 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>