ModalPopupExtender z-index 值在每次显示后都会减小

Question

这是我以前从未见过的新事物。我有一个包含一堆类别的网格视图，可以通过单击网格视图中相应的“编辑”链接来编辑这些类别。然后以编程方式显示 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（在) 页面内容（负 z 索引）。

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

ModalPopupBackground 类应用于 ModalPopupExtender BackgroundCssClass 属性。 ModalPopup 类应用于 asp:Panel CssClass 属性。