Hi all,
I work on DNN and I am using Modal Popup extender on a web user control. On firefox it runs smoothly but on IE7 there is some issue with the GUI. Once the popup appears the entire page's width and height goes haywire. The page's size increases and as you scroll right or left the page size continues to increase. The css that I apply to the modal popup - "background css", wherein I have specified - "background-color:gray" but instead of the background appearing gray the extra height that gets added to the page appears gray and it looks all messed up. Even my menu items shift to the right as I scroll right :(
The details are given below:
.ascx file code
========================
<asp:Button ID="Button1" runat="server" Text="Button" />
<div ID="NewPlaylist" Class="modalPopup" style="display:none;width:400px">
<asp:Label ID="lblNewPlaylist" runat="server" Text="New playlist name"></asp:Label>
<asp:TextBox ID="txtNewPlaylistName" runat="server"></asp:TextBox>
<asp:Button ID="btnAddPlaylist" runat="server" Text="Add" />
<asp:Button ID="btnCancelPlaylist" runat="server" Text="Cancel" />
</div>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="NewPlaylist" OkControlID="btnAddPlaylist" CancelControlID="btnCancelPlaylist" BackgroundCssClass="XPopUpBackGround" X="100" Y="100">
</cc1:ModalPopupExtender>
css
================
.XPopUpBackGround
{
top:0px !important;
left:0px !important;
position:absolute !important;
background:#ffffff ;
filter:alpha(opacity=70) !important;
opacity:0.7 !important;
z-index:1 !important;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
z-index:10001;
}