Display Loading image on top of Ajax Modalpopupextender

Question

I am using a loading image on every long processing events in my asp.net program, Using CSS and based from this reference http://www.aspsnippets.com/Articles/Show-Loading-Progress-Indicator-using-GIF-Image-when-UpdatePanel-is-updating-in-ASPNet.aspx, I was able to achieve that.

Now, I have a modalpopupextender that loads a gridview where user can select a row in it to transfer selected data in textbox. It also takes a lot of time to do that so I want to incorporate the loading image in gridview_selectedidexchanged event

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


    }

and

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

I figured out that the loading image is actually SHOWING but it is on the BACK OF THE MODALPOPUPEXTENDER, how can i make that at the very top? I tried modifying the z-index of their css but still do not work, here's the CSS

for the 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;
        }

for the loading image

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

}

try to edit the z-index of modal and the load image but still do not work. — rickyProgrammer, Feb 05 '15 at 09:41

score 0 · Answer 1 · answered Feb 05 '15 at 09:58

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

score 0 · Answer 2 · answered Aug 07 '17 at 06:06

I know this answer is waaay too late, but I came across this question and it doesn't have an accepted answer. So in case someone else comes across this, just try setting the z-index of the loading image to a value higher than 10001. I read it here that the default z-index of the background element of the modal popup extender is 10000 and foreground element is 10001. I tried it and it worked for me.

Display Loading image on top of Ajax Modalpopupextender

2 Answers2