2009-09-28 80 views
1

当我在我的页面中使用框架时,我有我的modalpopup风格的问题。如果我不使用页面中的框架,我不会遇到modalpopup风格的问题。遵循HTML代码和CSS在普通aspx中工作没有问题。在带有框架的页面中,面板位于页面顶部,背景颜色(灰色)覆盖页面的一半。链接按钮进入页面的右侧。为什么会发生?Modalpopup问题与框架

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; 
} 

页面的代码。当我不使用框架时,它可以正常工作:

<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>&nbsp;&nbsp;&nbsp; 
         &nbsp;<asp:button id="btnCancel" runat="server" Width="65px" Text="Delete" CssClass="MY_BUTTON"></asp:button>&nbsp;&nbsp;<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

OK,我解决我的疑难问题。我迁移我的项目从2003年到2008.I复制我的网页到2008年,而不是创造了新的page.So当我在2008年创造新的页面,页面上运行没有问题。

0

背景颜色:我假设只有框架是灰色的。这是可以的,因为您不应该在其他框架中更改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" /> 
+0

感谢您的回答亚瑟,但它并没有帮助我。其实我的问题是,当我点击与modalpopup相关联的按钮时,不能点击任何东西。我尝试使用IFRAME解决方案的ModalPopup,但它也没有帮助我.U可以看到这个例如在下面的链接。在普通页面,我没有问题,但在IFRAME(其中包含我的菜单),我不能使用modalpopup.Maybe我可以移动主页从IFRAME后,但我想知道为什么我们不能使用modalpopup与IFRAME.IFRAME是在网页中常见的方式来隐藏静态内容。 http://www.codeproject.com/KB/ajax/ASPModalInAction.aspx – Alexander 2009-10-01 06:31:50