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>

我发现装载图像实际上正在显示，但是它位于MODALPOPUPEXTENDER的背面，我怎样才能在最顶端做到这一点？我尝试修改他们的CSS的z-index但仍然不起作用，这里是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

我知道这个答案太迟了，但是我遇到了这个问题而且没有一个公认的答案。因此，万一有其他人遇到这个，只需尝试将加载图像的z-index设置为高于10001的值。我读它here模式弹出扩展器的背景元素的默认z-index是10000，前景元素是10001.我尝试了它，它对我有用。

在Ajax Modalpopupextender上显示加载图像

2 个答案: