ASP Modal Popup apparaît derrière gridview après 3 clics

Question

J'ai une page avec plusieurs popups modaux et une grille. Si j'ouvre les popups 3 fois la grille va en face de la popup. Je suis sûr qu'il a quelque chose à faire avec les panneaux de mise à jour, mais je suis perplexe.

Voici le code

<asp:UpdatePanel ID="NewCustCarUP" runat="server"> 
       <ContentTemplate> 
      <asp:button ID="NewCustButton" runat="server" CssClass="btn btn btn-success" text="Add Customer" OnClick="NewCustButton_Click"/> 
      <asp:button ID="NewCarButton" runat="server" CssClass="btn btn btn-primary" text="Add Carrier" OnClick="NewCarButton_Click"/> 


<!-- MP ADD CUST --> 
      <asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton> 
<cc1:ModalPopupExtender ID="mpAddCust" runat="server" PopupControlID="NewCustPanel" TargetControlID="lnkFake" 
    CancelControlID="btnClose" BackgroundCssClass="modalBackground" RepositionMode="RepositionOnWindowResizeAndScroll"> 
</cc1:ModalPopupExtender> 
<asp:Panel ID="NewCustPanel" runat="server" CssClass="modalPopup" style = "display: none; width:65%; height:90%; overflow:scroll; "> 
     <div class="row"> 
     <div class="col-sm-4"></div> 
     <div class="col-sm-4"><br /> 
      <asp:Button ID="newCustInsert" runat="server" UseSubmitBehavior="false" OnClick="newCustInsert_Click" CssClass="btn btn-success" ValidationGroup="NewCust" Text="Add Customer" /> 
      <asp:Button ID="btnClose" runat="server" Text="Close" CssClass="btn btn-danger" /> 
     </div> 
     <div class="col-sm-4 col-md-4 col-lg-4"></div> 
    </div> 




</asp:Panel> 
<!-- END MP ADD CUST -->  
        <!-- MP ADD CARRIER --> 
        <asp:LinkButton ID="lnkFake1" runat="server"></asp:LinkButton> 
        <cc1:ModalPopupExtender ID="mpAddCar" runat="server" PopupControlID="NewCarPanel" TargetControlID="lnkFake1" 
         CancelControlID="btnCloseCar" BackgroundCssClass="modalBackground" RepositionMode="RepositionOnWindowResizeAndScroll"> 
        </cc1:ModalPopupExtender> 
        <asp:Panel ID="NewCarPanel" runat="server" CssClass="modalPopup" style = "display: none; width:65%; height:90%; overflow:scroll; "> 

          <div class="row"> 
           <div class="col-sm-4"> 
.....Code with textboxes</div> 
           <div class="col-sm-4"> 
            <asp:Button ID="InsertCarBtn" runat="server" Text="Add Carrier" CssClass="btn btn-success" OnClick="InsertCarBtn_Click" ValidationGroup="NewCar" /> 
            <asp:Button ID="btnCloseCar" runat="server" Text="Close" CssClass="btn btn-danger" /> 
           </div> 
           <div class="col-sm-4 col-md-4 col-lg-4"></div> 
          </div> 
        </asp:Panel> 

        <!-- END MP ADD CARRIER --> 

       </ContentTemplate> 
      </asp:UpdatePanel> 

      <asp:UpdatePanel ID="MPStatusUP" runat="server"> 
         <ContentTemplate> 
        <asp:panel ID="StatusPanel" runat="server" CssClass="modalPopup" style="z-index: 10000; position: relative;" > 
          <div class="row"> 
           <div class="col-sm-4"> 
....Content 
</div> 
           <div class="col-sm-4"> 
            <asp:button ID="StatusbtnUpdate" runat="server" Text="Update" CssClass="btn btn-success" OnClick="StatusbtnUpdate_Click" /> 
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btn btn-danger" OnClientClick = "return Hidepopup()"/> 
           </div> 
           <div class="col-sm-4 col-md-4 col-lg-4"></div> 
          </div> 

         </asp:panel>     
        <asp:LinkButton ID="lnkFake3" runat="server"></asp:LinkButton> 
<cc1:ModalPopupExtender ID="StatusMP" runat="server" DropShadow="false" 
PopupControlID="StatusPanel" TargetControlID = "lnkFake3" 
BackgroundCssClass="modalBackground"> 
</cc1:ModalPopupExtender> 

         </ContentTemplate> 
        </asp:UpdatePanel> 

        <asp:UpdatePanel ID="Gridview1UP" runat="server" ChildrenAsTriggers="true" 
UpdateMode="Conditional"> 
         <ContentTemplate> 
       <asp:gridview ID="GridView1" runat="server" 
         DataSourceID="ActiveLoadsSQL" AutoGenerateColumns="False" BorderStyle="None" BorderWidth="0px" Width="100%" 
         OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnRowDataBound="GridView1_RowDataBound" 
         DataKeyNames="LoadID" AllowSorting="true" AllowPaging="true" Font-Size="Smaller" CssClass="table table-hover" 
         pagesize="25"> 
      <Columns> 
       <asp:TemplateField HeaderText="loadID" InsertVisible="False" SortExpression="loadID"> 
        <ItemTemplate> 
         <asp:Label ID="loadIDLabel" runat="server" Text='<%# Bind("loadID") %>'></asp:Label> 
        </ItemTemplate> 
       </asp:TemplateField> 


       </asp:TemplateField> 
       <asp:TemplateField HeaderText="Status"> 
        <ItemTemplate> 
         <asp:Button ID="UpdateStatusModalbtn" OnClick="UpdateStatusModalbtn_Click" runat="server" CommandName="select" CssClass="btn btn-info btn-xs" text="Update"/> 

         </ItemTemplate> 
       </asp:TemplateField> 

      </Columns> 
         <RowStyle VerticalAlign="Top" /> 
     </asp:gridview> 

     </ContentTemplate> 
        </asp:UpdatePanel> 

Tout fonctionne très bien jusqu'à ce que je je clique sur un bouton 3 fois sur le modal d'état à l'intérieur du GV et 4 fois sur le client Ajouter et transport à l'extérieur de la GV. Merci de votre aide!!

Answer 1

fixe avec ce post

AJAX ModalPopup Pops Behind (Under) Page Content (Negative z-index)

.ModalPopup 
{ 
    z-index: 6001 !important; 
} 
.ModalPopupBackground 
{ 
    z-index: 6000 !important; 
}