当我在页面中使用框架时，我的modalpopup样式出现问题。如果我不在页面中使用框架，我不会遇到modalpopup样式的问题。以下HTML代码和CSS在普通的aspx中工作没有问题。在带框架的页面中，面板位于页面顶部，背景颜色（灰色）仅覆盖页面的一半。并且链接按钮位于页面右侧。为什么会这样？
CSS样式：
/* 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的代码。当我不使用框架时，它可以正常工作：
<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>
答案 0 :(得分：0)
背景颜色：我假设只有Frame会是灰色的。这没关系，因为您不应该在另一个框架中更改HTML代码。
位置：模态扩展器计算对话框位置。所以你的CSS值会被忽略。使用modalpopupextender上的属性X和Y来设置固定位置。
<cc1:modalpopupextender ID="mdlDelete" runat="server"
PopupControlID="pnlDelete" BackgroundCssClass="modalBackground"
OkControlID="btnDeleteOk" CancelControlID="btnDeleteCancel"
TargetControlID="btnDelete" X="10" Y="10" />
答案 1 :(得分：0)
好的，我解决了我的问题。我正在将我的项目从2003年迁移到2008年。我将我的页面复制到2008，而不是创建新页面。所以当我在2008年创建新页面时，页面运行没有问题。