Дисплей Загрузка изображения поверх 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_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>

Я понял, что загружаемое изображение на самом деле ПОКАЗЫВАЕТСЯ, но оно находится НА ОБРАТНОМ МОДАЛЬНОМ ПОПУПЭКСТЕНДЕРЕ, как я могу сделать это на самом верху? Я пытался изменить Z-индекс их CSS, но по-прежнему не работают, вот CSS

для модальпопуп

 .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

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