I have a problem with my modalpopup style when I use frame in my page. I don’t get trouble with modalpopup style if I don’t use frames in page. Following HTML code and CSS work in normal aspx without a problem. In a page with frame, panel gets top of the page and background colour (grey colour) covers just half of page. And link button goes to right of page. Why does this happen?
CSS style:
/* dialog frame */
.modal-dialog
{
position:absolute;
}
/* dialog contents container */
.modal-dialog .container
{
font-family:tahoma,helvetica,arial,sans-serif;
font-size:11px;
width:340px;
border:solid 1px #99aabd;
background-color:#F2F9FF;
}
/* dialog header */
.modal-dialog .header
{
background:url(img/sprite.gif) repeat-x 0px -1100px;
height:25px;
padding-top:5px;
}
/* dialog header message */
.modal-dialog .header .msg
{
vertical-align:middle;
padding-left:6px;
color:#fff;
font-size:12px;
font-weight:bold;
}
/* dialog body */
.modal-dialog .body
{
height:40px;
background-color:#F2F9FF;
}
/* dialog body message */
.modal-dialog .body h2
{
padding-top:10px;
background-color: #F2F9FF;
font-size:14px;
text-align:center;
font-weight:normal;
}
/* dialog footer */
.modal-dialog .footer
{
height:30px;
background-color: #F2F9FF;
}
/* dialog footer buttons */
.modal-dialog .footer .right
{
background-color: #F2F9FF;
float:none;
text-align:center;
padding-bottom:6px;
}
/* dialog footer checkbox */
.modal-dialog .footer .left
{
background-color: #F2F9FF;
float:left;
text-align:left;
padding-bottom:6px;
padding-left:6px;
}
/* dialog close */
.modal-dialog .close
{
right:4px;
background: url(img/icons.gif) no-repeat -732px 0px;
width:16px;
cursor:hand;
position:absolute;
top:5px;
height:16px;
}
/* dialog close hover */
.modal-dialog .close:hover { background: url(img/icons.gif) no-repeat -749px 0px; }
/* modal overlay */
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=50);
opacity:0.5;
}
Page’s code. It works properly when I don’t use frame:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<TABLE id="Table1" style="Z-INDEX: 101; POSITION: absolute; WIDTH: 685px; HEIGHT: 192px; TOP: 45px; LEFT: 8px"
cellSpacing="1" cellPadding="1" width="685" border="0">
<TR>
<TD noWrap>
<TABLE id="Table2" cellSpacing="0" cellPadding="2" width="100%" border="0">
<TR>
<TD style="WIDTH: 129px; HEIGHT: 6px" noWrap><asp:label id="Label3" runat="server">Personel Tipi</asp:label></TD>
<TD style="HEIGHT: 6px" noWrap><asp:dropdownlist id="cboID_PERSONAL_TYPE" runat="server" Width="200px" AutoPostBack="True"></asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap><asp:label id="Label1" runat="server" Width="112px"> Personel Name</asp:label></TD>
<TD noWrap><asp:textbox id="txtDS_NAME" runat="server" Width="200px" BorderColor="LightSteelBlue" BorderWidth="1px" Height="20px" BorderStyle="Solid"></asp:textbox></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap></TD>
<TD noWrap>
<asp:checkbox id="chkActive" runat="server" Text="Active"></asp:checkbox></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap><asp:label id="Label4" runat="server" Width="112px">Temsilci No</asp:label></TD>
<TD noWrap><asp:textbox id="txtTEMSILCI_NO" runat="server" Width="80px" BorderColor="LightSteelBlue" BorderWidth="1px"
Height="20px" BorderStyle="Solid" MaxLength="10"></asp:textbox></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap><asp:label id="Label2" runat="server" Width="112px">Director (TSM)</asp:label></TD>
<TD noWrap><asp:dropdownlist id="cboID_DIRECTOR" runat="server" Width="200px"></asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap>
<asp:label id="Label5" runat="server" Width="136px">Expert. (TC)</asp:label></TD>
<TD noWrap>
<asp:dropdownlist id="cboID_EXPERT" runat="server" Width="200px"></asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 129px; HEIGHT: 14px" noWrap>
<asp:label id="Label31" runat="server" Width="88px">Type</asp:label></TD>
<TD noWrap style="HEIGHT: 14px">
<asp:dropdownlist id="cboID_Type" runat="server"></asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap>
<asp:label id="Label6" runat="server" Width="88px">Rut</asp:label></TD>
<TD noWrap>
<asp:dropdownlist id="cbo_ID_RT" runat="server"></asp:dropdownlist></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD noWrap align="right" style="HEIGHT: 21px"><asp:button id="btnSave" runat="server" Width="65px" Text="Save" CssClass="MY_BUTTON"></asp:button>
<asp:button id="btnCancel" runat="server" Width="65px" Text="Delete" CssClass="MY_BUTTON"></asp:button> <asp:button id="btnDelete" runat="server" Width="65px" Text="Sil" CssClass="MY_BUTTON"></asp:button></TD>
</TR>
<TR>
<TD noWrap align="right" height="20"><asp:label id="lblStatus" runat="server" Height="16px" ForeColor="Red" Font-Bold="True"></asp:label></TD>
</TR>
<TR>
<TD noWrap>
</TD>
</TR>
</TABLE>
<asp:label id="Label29" style="Z-INDEX: 103; POSITION: absolute; TOP: 8px; LEFT: 8px" runat="server"
Width="168px" Height="8px" ForeColor="#0000C0" Font-Bold="True" Font-Size="12pt">Parametreler > Bayi ></asp:label><asp:label id="Label30" style="Z-INDEX: 102; POSITION: absolute; TOP: 8px; LEFT: 184px" runat="server"
Width="200px" Height="8px" ForeColor="#C00000" Font-Bold="True" Font-Size="12pt">Personel / Temsilci Girişi</asp:label><asp:textbox id="hdnID" style="Z-INDEX: 104; POSITION: absolute; TOP: 8px; LEFT: 472px" runat="server"
Width="33px" BorderColor="LightSteelBlue" BorderWidth="1px" BorderStyle="Solid" Visible="False"></asp:textbox>
<cc1:modalpopupextender ID="mdlDelete" runat="server"
PopupControlID="pnlDelete" BackgroundCssClass="modalBackground" OkControlID="btnDeleteOk" CancelControlID="btnDeleteCancel"
TargetControlID="btnDelete">
</cc1:modalpopupextender>
<asp:Panel ID="pnlDelete" runat="server" CssClass="modal-dialog" style="display:none">
<div class="frame">
<div class="container">
<div class="header">
<div class="msg">Warning</div>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('mdlDelete').hide(); return false;" />
</div>
<div class="body">
<h2>Are u sure?h2>
</div>
<div class="footer">
<div class="right">
<asp:Button
ID="btnDeleteOk" runat="server" Text="Yes" Width="40px" />
<input id="btnDeleteCancel" type="button" value="No" style="width:40px" />
</div>
</div>
</div>
</div>
</asp:Panel>
</div>
</form>
</body>
OK,i solved my problem.I am migrating my project from 2003 to 2008.I copied my page to 2008,not created new page.So when i create new page in 2008,page runs without problem.