Question

我有一个包含多个模态弹出窗口和gridview的页面。如果我打开弹出窗口3次，网格就会弹出弹出窗口。我很确定它有一些与更新面板有关的事情，但我很难过。

这是代码

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

这一切都很有效，直到我在GV内部的状态模式上点击按钮3次，在GV外面的添加客户和运营商上点击4次。谢谢你的帮助!!

Answer 1

修正了这篇文章

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

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

点击3次后，ASP模态弹出窗口出现在gridview后面

1 个答案: