Question

This is a new one I have never seen before. I have a gridview containing a bunch of categories that can be edited by clicking on the respective “Edit” link within the gridview. The modalpopupextender is then shown programmatically (.show() method) and the user is allowed to edit the category. Then the modal popup is programmtically hidden (.hide() method) when the user presses “Update” or “Cancel”. For some reason after every new show of the modal popup, the z-index is decreasing by 1000 until it is hidden behind everything on my page. It starts at 7000 for the very first show. Therefore the user would not be able to edit an infinite number of categories if they wanted to. Any ideas why this is happening?

Css class used on modalpopupextender:

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

Panel used for popup:

<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

Found the problem. The panel I was using for the pop-up was inside another update panel. I moved it outside of the update panel and the z-index is no longer changing.