在 Ajax Modalpopupextender 顶部显示加载图像答案

【问题标题】：Display Loading image on top of Ajax Modalpopupextender在 Ajax Modalpopupextender 顶部显示加载图像
【发布时间】：2015-04-05 02:04:59
【问题描述】：

我在我的 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>

我发现加载图像实际上正在显示，但它位于 MODALPOPUPEXTENDER 的背面，我怎样才能将它放在最顶部？我尝试修改他们的 css 的 z-index 但仍然不起作用，这是 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;

}

【问题讨论】：

尝试编辑modal和load image的z-index还是不行。

标签： c# css asp.net ajax modalpopupextender

【解决方案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>``

【讨论】：

【解决方案2】：

我知道这个答案太晚了，但我遇到了这个问题，它没有一个可接受的答案。因此，如果其他人遇到这种情况，只需尝试将加载图像的 z-index 设置为高于 10001 的值。我读到 here 模态弹出扩展器的背景元素的默认 z-index 是 10000和前景元素是 10001。我试过了，它对我有用。

【讨论】：