I have a ModalPopupExtender set up on a page and working great. It's tied to a panel with some style attributes hardcoded into its tag. I'm trying to get all my styles out of my markup into CSS, but when I move these styles into a class, the popup fails to work. What's going on?
Styles in CSS:
.class1
{
border: solid 1px black;
display: none;
width: 700px;
height: 400px;
background-color: gray;
overflow: scroll;
}
.class2
{
background-color: White;
height: 90%;
width: 95%;
}
.backgroundClass
{
background-color: gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
Panel:
<asp:Panel ID="pnlModalContainer" runat="server" CssClass="class1">
<asp:Panel ID="pnlModalHandle" runat="server">
<table cellpadding="0" cellspacing="0" border="0" width="650px">
<tr>
<td>
Content Here |
<asp:Label ID="lblTitle" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<div style="padding-left: 25px;">
<table cellpadding="1" cellspacing="0" border="0" class="class2">
<tr valign="top">
<td>
<asp:UpdatePanel ID="udpPopups" runat="server">
<ContentTemplate>
...content here...
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr valign="bottom">
<td align="right" style="padding-bottom: 5px; padding-right: 5px;">
<asp:Button ID="btnModalOk" runat="server" Text="Ok" />
<asp:Button ID="btnModalCancel" runat="server" Text="Cancel" CausesValidation="false" />
</td>
</tr>
</table>
</div>
</asp:Panel>
And the MPE:
<cc1:ModalPopupExtender ID="mpeAction" runat="server" PopupControlID="pnlModalContainer"
TargetControlID="fakeButton" BackgroundCssClass="backgroundClass" DropShadow="false"
PopupDragHandleControlID="pnlModalHandle" RepositionMode="RepositionOnWindowResizeAndScroll" />
This is in ASP .NET 2.0. Set up like this, I see the background show up, but the popup doesn't come up. But if I move the contents of class1 down to the markup as a style, it works great. The popup gets shown via Javascript emitted from VB code-behind, using ScriptManager.RegisterStartupScript().