Anzeige Ajax UpdateProgress in der Mitte der Seite

Question

Ich verwende das Ajax UpdateProgress-Steuerelement. Obwohl es so funktioniert, wie ich es erwartet habe, möchte ich, dass es in der Mitte der Seite erscheint. Wie kann ich tun, dass

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

Answer 1

Dank Jaidev, Sehr praktisch Post!

Es kann eine Weile dauern, die CSS richtig hinzubekommen, so dass nur die Lösung für alle anderen zu vereinfachen, müssen Sie nur die folgenden (für Updatemittel Positionierung):

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

und für das Bild:

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

Answer 2

Verwendung dieser Stil in Ihrem 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;" 

und diesen Stil in Ihrem img verwenden:

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

Answer 3

Verwenden ModalPpoupExtender und das Ziel gesetzt, die Steuerung an den Aktualisierungsvorgang

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

Answer 4

Sie auch UpdatePanelAnimationExtender verwenden könnte, I. G. um die Kontrolle zu deaktivieren, die ein Submit-Ereignis ausgelöst hat.

Answer 5

Versuchen Sie folgendes:

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

Legen Sie Ihre CSS-Eigenschaften als Prozentsätze.

Im zweiten div:

1. Set background-image: url ('[Pfad zum Bild]').
2. Oben, links, Höhe, Breite entsprechend einstellen; top = (100-height)/2, left = (100-width)/2

Überprüfen Sie in beiden Divs, ob der Z-Index über anderem Inhalt liegt.

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

Ich habe diesen Code ausprobiert und es funktioniert in IE und 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> 

Answer 8

habe ich diesen Code in meinem Projekt.

Die ASPX:

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

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