Дисплей Загрузка изображения поверх Ajax Modalpopupextender

Question

Я использую загрузочное изображение для каждой длительной обработки событий в моей программе asp.net, используя CSS и основываясь на этой ссылке http://www.aspsnippets.com/Articles/Show-Loading-Progress-Indicator-using-GIF-Image-when-UpdatePanel-is-updating-in-ASPNet.aspx, я смог достичь этого.

Теперь у меня есть modalpopupextender, который загружает gridview, где пользователь может выбрать строку в нем для передачи выбранных данных в текстовое поле. Он также занимает много времени, чтобы сделать это, поэтому я хочу, чтобы включить изображение загрузки в gridview_selectedidexchanged случае

protected void grdLocation_SelectedIndexChanged(object sender, EventArgs e) 
    { 
     System.Threading.Thread.Sleep(500); 


     GridViewRow row = grdLocation.SelectedRow; 
     hdnSearchedLoc.Value = grdLocation.Rows[grdLocation.SelectedIndex].Cells[1].Text; 
     txtSearchedLoc.Text = HttpUtility.HtmlDecode(row.Cells[2].Text); 


    } 

и

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> 
<ProgressTemplate> 
    <div class="modal"> 
     <div class="center" align="center"> 
      Processing Data, Please wait.. 
      <img alt="" src="images/loader.gif" /> 
     </div> 
    </div> 

</ProgressTemplate> 
</asp:UpdateProgress> 



<asp:UpdatePanel ID="UpdatePanel1" runat="server" > 
<ContentTemplate> 

Modalpopup details.. 

</ContentTemplate> 
</asp:UpdatePanel> 

Я понял, что загрузка изображения на самом деле SHOWING но на BACK OF MODALPOPUPEXTENDER, как я могу сделать это на самом верху? Я попытался изменения Z-индекс их CSS, но до сих пор не работает, вот CSS

для modalpopup

.ModalPanel 
    { 
     background-color: white; 
     width: 460px; 
     height: 520px; 
     -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
     border-radius: 10px; 

     border: 2px solid #8CCA33; 
     z-index: 100; 


    } 


     .ModalBackground 
     { 
      background-color: Black; 
      filter: alpha(opacity=70); 
      opacity: 0.7; 
      z-index: 100; 


     } 

     .ModalWindow 
     { 

      position: relative; 
      background-color: transparent; 
      width: 420px; 
      height: 480px; 
      margin-left: auto; 
      margin-right: auto; 
      z-index: 200; 

     } 


     .ModalHeader 
     { 
      width: 420px; 
      height: 40px; 
      background-color: white; 
      font-family: 'Trebuchet MS'; 
      border-bottom: 3px double green; 
      z-index: 300; 
     } 

     .ModalBody 
     { 
      position: relative; 
      width: 420px; 
      height: 400px; 
      background-color: white; 
      font-family: 'Trebuchet MS'; 
      top: 20px; 
      z-index: 301; 
     } 

для загрузки изображения

.modal 
{ 


    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 9999; 
    height: 100%; 
    width: 100%; 
    background-color: transparent ; 

} 


.center 
{ 

     font-family: Arial; 
     font-size: 12pt; 
     color:blue; 
     font-weight: bold; 
     z-index: 10000; 
     width: 1000px; 
     height: 80px; 
     background-color: #F5FAFF; 
     border: 5px solid #67CFF5; 
     border-radius: 10px; 
     margin: 300px auto; 
     padding: 10px; 

} 

Answer 1

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" > 
     <ContentTemplate> 
      <asp:ModalPopupExtender> 
      <asp:Gridview> 
      </asp:Gridview> 
      </asp:ModalPopupExtender> 

     <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> 
     <ProgressTemplate> 
      <div class="modal"> 
      <div class="center" align="center"> 
       Processing Data, Please wait.. 
       <img alt="" src="images/loader.gif" /> 
      </div> 
      </div> 
      </ProgressTemplate> 
     </asp:UpdateProgress> 
     </ContentTemplate> 
     </asp:UpdatePanel>`` 

Answer 2

я знаю этот ответ waaay слишком поздно, но я столкнулся с этим вопросом, и у него нет принятого ответа. Поэтому в случае, если кто-то еще сталкивается с этим, просто попробуйте установить z-индекс загружаемого изображения на значение, превышающее 10001. Я прочитал его here, что индекс z по умолчанию для фонового элемента модального всплывающего расширителя составляет 10000 и переднего плана элемент 10001. Я попробовал, и это сработало для меня.