ModalPopupExtender z-index 值在每次演出后减小答案

【问题标题】：ModalPopupExtender z-index value decreases after every showModalPopupExtender z-index 值在每次演出后减小
【发布时间】：2010-04-21 14:48:40
【问题描述】：

这是我以前从未见过的新产品。我有一个 gridview 包含一堆类别，可以通过单击 gridview 中的相应“编辑”链接进行编辑。 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;" />

【问题讨论】：

标签： asp.net ajaxcontroltoolkit modalpopupextender z-index

【解决方案1】：

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

【讨论】：

谢谢你，瑞恩。我遇到了这个问题，因为我遇到了同样的问题，而且肯定是 UpdatePanel 干扰了 ModalPopupExtender。我把它移到外面，一切都很好

【解决方案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 属性。

【讨论】：