Visualizza Ajax UpdateProgress nel mezzo della pagina

Question

Sto utilizzando il controllo Ajax UpdateProgress. Anche se funziona proprio come mi aspettavo che funzionasse, voglio che appaia al centro della pagina. Come faccio a farlo

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

Answer 1

Grazie Jaidev, Molto utile post!

Si può prendere un po 'per ottenere il css giusto, così giusto per semplificare la soluzione per tutti gli altri, è necessario solo il seguente (per UpdateProgress mezza posizionamento):

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

e per l'immagine:

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

Answer 2

usare questo stile nel vostro 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;" 

e usare questo stile nella vostra img:

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

Answer 3

Usa ModalPpoupExtender e impostare il controllo di destinazione per l'avanzamento dell'aggiornamento

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

Answer 4

Si potrebbe anche usare UpdatePanelAnimationExtender, I.G. per disattivare il controllo che ha attivato un evento di invio.

Answer 5

Prova questo:

<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

Impostare le proprietà CSS come percentuali.

Nella seconda div: background-image

1. Set: url ('[Percorso alla vostra immagine]').
2. Impostare in alto, a sinistra, altezza, larghezza di conseguenza; top = (100-height)/2, left = (100-width)/2

In entrambi i div, controllare che lo z-index sia impostato sopra l'altro contenuto.

Lavori 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

Ho provato questo codice e funziona in IE e 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

ho usato nel mio progetto di questo codice.

L'ASPX:

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

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