Modalpopup Problem with Frame

Question

Hi, i have a problem with my modalpopup style when i use frame in my page.I dont get trouble with modalpopup style if i dont use frames in page.Following html code and css work in normal aspx without 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.I couldnt understand why it happens.Please help if u know something about it

---

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 DONT USE FRAME

---

Personel Tipi Personel Name Temsilci No Director (TSM) Expert. (TC) Type Rut        

    </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>

Answer 1

Background color: I assume, that only the Frame will be grey. This is OK, since you should not change HTML Code in another Frame.

Position: The Modal Extender calculates the dialog position. So your CSS values are ignored. Use the Property X and Y on the modalpopupextender to set a fixed position.

<cc1:modalpopupextender ID="mdlDelete" runat="server"                                              
    PopupControlID="pnlDelete"  BackgroundCssClass="modalBackground"  
    OkControlID="btnDeleteOk" CancelControlID="btnDeleteCancel"
    TargetControlID="btnDelete" X="10" Y="10" />

Answer 2

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.