Problème de modalpopup avec l'image

J'ai un problème avec mon style modalpopup lorsque j'utilise un cadre dans ma page. Je n'ai pas de problème avec le style modalpopup si je n'utilise pas d'images dans la page. Le code HTML et le code CSS suivants fonctionnent normalement sans problème. Dans une page avec cadre, le panneau obtient le haut de la page et la couleur d'arrière-plan (couleur grise) couvre seulement la moitié de la page. Et le bouton de lien va à droite de la page. Pourquoi cela arrive-t-il?Problème de modalpopup avec l'image

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

code de la page. Il fonctionne correctement lorsque je n'utilise pas de cadre:

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

Source

2009-09-28 Alexander

OK, je résolu mes problem.I suis migraient mon projet de 2003 à 2008.I copié ma page à 2008, pas créé de nouveaux page.So quand je crée nouvelle page en 2008, la page fonctionne sans problème.

Source

2009-10-02 12:31:32 Alexander

Couleur de fond: Je suppose que seul le cadre sera gris. C'est OK, car vous ne devriez pas changer le code HTML dans un autre cadre. Position: Le Modal Extender calcule la position du dialogue. Ainsi, vos valeurs CSS sont ignorées. Utilisez la propriété X et Y sur modalpopupextender pour définir une position fixe.

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

Source

2009-09-28 09:38:24 Arthur

Merci pour votre réponse Arthur mais il n'a pas m'aider.En fait mon problème est que je ne peux rien cliquer quand je clique sur le bouton qui est associé à modalpopup.I a essayé ModalPopup avec la solution IFRAME mais il m'a pas aidé aussi. Dans les pages normales, je n'ai pas de problème mais dans IFRAME (qui contient mon menu) je ne peux pas utiliser modalpopup.Maybe je peux déplacer Master Page de IFRAME plus tard mais je me demande pourquoi nous ne pouvons pas utiliser modalpopup avec IFRAME.IFRAME est manière commune dans les pages Web pour masquer le contenu statique. http://www.codeproject.com/KB/ajax/ASPModalInAction.aspx – Alexander

Problème de modalpopup avec l'image

Répondre

Questions connexes