ModalPopupExtender z-index value decreases after every show
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" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" CausesValidation="false" />
</td>
</tr>
开发者_Python百科 </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;" />
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.
I have an UpdatePanel with within it a ModalPopupExtender. Every seventh time I opened the popup the layout in the site was messed up. So it appeared to be a problem with the z-index, it became less than a specific value (i.e. less than 0) every time the popup opened. The fix was found here: AJAX ModalPopup Pops Behind (Under) Page Content (Negative z-index).
.ModalPopup {
z-index: 6001 !important;
}
.ModalPopupBackground {
z-index: 6000 !important;
}
The ModalPopupBackground
class is applied to the ModalPopupExtender BackgroundCssClass
attribute. The ModalPopup
class was applied tot the asp:Panel CssClass
attribute.
精彩评论