Question

这是我以前从未见过的新作品。我有一个包含一系列类别的gridview，可以通过单击gridview中相应的“Edit”链接进行编辑。然后以编程方式显示modalpopupextender（.show（）方法），并允许用户编辑类别。然后，当用户按下“更新”或“取消”时，模式弹出窗口被编程隐藏（.hide（）方法）。出于某种原因，在模式弹出窗口的每个新节目之后，z-index将减少1000，直到它隐藏在我页面上的所有内容之后。第一场演出的起始价为7000。因此，如果用户想要，用户将无法编辑无限数量的类别。任何想法为什么会发生这种情况？

modalpopupextender上使用的Css类：

DIV.box-pop
{
    border: #95aab9 1px solid;
    background-color: #ECF1F5;
    display: block;
    position: relative;
    margin: -6px 6px 6px -6px;
    padding: 4px;
    z-index: 10000;
}

用于弹出窗口的面板：

<asp:Panel ID="PanelModify" runat="server" Width="250px" CssClass="box-pop">
    <asp:UpdatePanel ID="UpdatePanelModify" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <table width="100%" cellpadding="3" cellspacing="3">
                <tr>
                    <td>
                        <div class="box">
                            <h1>
                                <span><strong>
                                    <asp:Literal ID="LiteralModalTitle" runat="server" /></strong></span>
                            </h1>
                            <table border="0" width="100%">
                                <tr>
                                    <td>
                                        <asp:TextBox ID="TextBoxModifiedText" runat="server" Width="173px" ValidationGroup="Modify"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidatorModifiedText" runat="server"
                                            ValidationGroup="Modify" ErrorMessage="*" ControlToValidate="TextBoxModifiedText"
                                            Display="Dynamic">
                                        </asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Button ID="ButtonUpdate" runat="server" Text="Update" ValidationGroup="Modify" /><asp:Button
                                            ID="ButtonInsert" runat="server" Text="Insert" ValidationGroup="Modify" />
                                        &nbsp;
                                        <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" CausesValidation="false" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderModify" runat="server" PopupControlID="PanelModify"
    TargetControlID="ButtonHideModify" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Button ID="ButtonHideModify" runat="server" Style="display: none;" />

Answer 1

发现问题。我用于弹出窗口的面板位于另一个更新面板中。我将它移到更新面板之外，z-index不再变化。

Answer 2

我有一个UpdatePanel，里面有一个ModalPopupExtender。我每七次打开弹出窗口时，网站的布局就搞砸了。所以它似乎是z-index的问题，每次弹出窗口打开时它变得小于特定值（即小于0）。修复程序在此处找到：AJAX ModalPopup Pops Behind (Under) Page Content (Negative z-index)。

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

ModalPopupBackground类适用于ModalPopupExtender BackgroundCssClass属性。 ModalPopup类已应用于asp：Panel CssClass属性。

每次显示后，ModalPopupExtender z-index值都会减少

2 个答案: