Hiển thị Ajax UpdateProgress ở giữa Trang

Question

Tôi đang sử dụng điều khiển Ajax UpdateProgress. Mặc dù nó hoạt động đúng như tôi mong đợi nó hoạt động, tôi muốn nó xuất hiện ở giữa trang. Làm thế nào để làm điều đó

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

Answer 1

Cảm ơn Jaidev, bưu Rất tiện dụng!

Nó có thể mất một thời gian để có được css vừa phải, vì vậy chỉ cần đơn giản hóa các giải pháp cho những người khác, bạn chỉ cần như sau (cho UpdateProgress trung vị):

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

và cho hình ảnh:

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

Answer 2

sử dụng phong cách này trong div của bạn:

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

và sử dụng phong cách này trong img của bạn:

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

Answer 3

Sử dụng ModalPpoupExtender và thiết lập sự kiểm soát mục tiêu tiến độ cập nhật

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

Answer 4

Bạn cũng có thể sử dụng UpdatePanelAnimationExtender, i.g. để hủy kích hoạt kiểm soát đã kích hoạt sự kiện gửi.

Answer 5

Hãy thử điều này:

<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

Đặt thuộc tính CSS của bạn như tỷ lệ phần trăm.

Trong div thứ hai:

1. Set background-image: url ('[Đường dẫn đến hình ảnh của bạn]').
2. Đặt trên cùng, bên trái, chiều cao, chiều rộng cho phù hợp; trên cùng = (100-height)/2, left = (100-width)/2

Trong cả hai div, hãy kiểm tra chỉ mục z được đặt phía trên nội dung khác.

trình trong 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

Tôi đã thử mã này và nó hoạt động trong IE và 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

tôi được sử dụng trong dự án của tôi mã này.

Các 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; 
}