Ajax Modal Popup不會在彈出窗口中顯示內聯驗證，而是顯示在模態彈出窗口後面

Question

當我使用以下內聯的基於jQuery的驗證在asp.net中使用c＃web窗體顯示時，它可以正常工作。 http://www.aspdotnet-suresh.com/2012/01/jquery-beautiful-popup-form-validations.html

但是，當我嘗試在Ajax Modal Popup中使用相同的內容時，它將顯示屏幕截圖中顯示的Modal彈出窗口後面的驗證。

它驗證所有輸入字段，但在彈出窗口中顯示驗證，如圖中紅色箭頭所示。我無法找到正確的CSS屬性，因此它可以在彈出窗口上顯示內聯驗證。

我使用的鏈接，我只修改了CSS的顏色屬性顯示在金色休息直列背景上顯示相同的CSS和jQuery文件都是相同

http://www.aspdotnet-suresh.com/2012/01/jquery-beautiful-popup-form-validations.html

我相信有人必須遇到類似的問題，並修復它，任何幫助來自CSS大師或任何人可以幫助解決這個問題，我已經嘗試過，但我不擅長與CSS。

我的.aspx頁面代碼

<asp:ModalPopupExtender ID="mpShowCommentPopUp" runat="server" TargetControlID="lnkBtnComment" PopupControlID="pnlComment" 
BackgroundCssClass="modalBackground"></asp:ModalPopupExtender> 

<asp:Panel ID="pnlComment" runat="server" BackColor="White" Height="500px" Width="500px" style="display:none"> 
<div id="commentForm"> 
<asp:UpdatePanel ID="updPnlComment" runat="server"> 
<ContentTemplate> 

<table align="center" cellpadding="0" cellspacing="0" width="600px"> 
     <tr> 
      <td> 
       <table cellpadding="0" cellspacing="10"> 
        <tr> 
         <td colspan="2"><asp:Label ID="lblPostComment" runat="server" Text="Post Comment" CssClass="lblPostComment"></asp:Label> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2"><asp:Label ID="lblCommentMsg" CssClass="txtLabelComment" runat="server" Text="Please make sure your comment is not abusive, defamatory or offensive. All 
          fields must be filled in correctly or the comment will not be approved."></asp:Label> 
          </td> 
        </tr> 
        <tr> 
         <td colspan="2"><asp:Label ID="lblRequired" CssClass="txtLabelComment" runat="server" Text="[*] indicates a required field."></asp:Label> 
         </td> 
        </tr> 
        <tr> 
         <td width="100px"> 
          <asp:Label ID="lblFullName" runat="server" Text="Full Name" CssClass="txtLabelComment"></asp:Label> 
         </td> 
         <td width="400px"> 
          <asp:TextBox ID="txtFullName" runat="server" CssClass="validate[required] txtbox300Comment"></asp:TextBox> 
          &nbsp;* 
         </td> 

        </tr> 
        <tr> 
         <td > 
          <asp:Label ID="lblEmail" runat="server" Text="Email Address" CssClass="txtLabelComment"></asp:Label> 
         </td> 
         <td> 
          <asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required,custom[email]] txtbox300Comment"></asp:TextBox> 
          &nbsp;* 
         </td> 
        </tr> 
        <tr> 
         <td > 
          <asp:Label ID="lblCountry" runat="server" Text="Country" CssClass="txtLabelComment"></asp:Label> 
         </td> 
         <td> 
<asp:DropDownList ID="ddCountry" runat="server" CssClass="validate[required] ddGeneralComment"> 
    <asp:ListItem Value="" ></asp:ListItem> 
    <asp:ListItem Value="AF">Afghanistan</asp:ListItem> 
    <asp:ListItem Value="AL">Albania</asp:ListItem> 
    <asp:ListItem Value="DZ">Algeria</asp:ListItem> 
    <asp:ListItem Value="AS">American Samoa</asp:ListItem> 
    <asp:ListItem Value="AD">Andorra</asp:ListItem> 
    <asp:ListItem Value="AO">Angola</asp:ListItem> 
</asp:DropDownList> 
          &nbsp;*</td> 
        </tr> 
        <tr> 
         <td > 
          <asp:Label ID="lblMSG" runat="server" Text="Your Message" CssClass="txtLabelComment"></asp:Label> 
         </td> 
         <td> 
          <asp:TextBox ID="txtMessage" runat="server" CssClass="validate[required, maxSize[500]] txtbox300MComment" 
           TextMode="MultiLine" MaxLength="10"></asp:TextBox> 
          &nbsp;*</td> 
        </tr> 
        <tr> 
         <td valign="top" >        
          <asp:Label ID="lblCapcha" runat="server" Text="Verification Code" CssClass="txtLabelComment"></asp:Label> 
         </td> 
         <td valign="top" > 
         <uc1:MyCaptcha ID="MyCaptcha1" runat="server" /> 

         </td> 
        </tr> 
        <tr> 
         <td >&nbsp;</td> 
         <td> 
          <asp:CheckBox ID="cbAnonymous" runat="server" 
           Text="I wish to be anonymous. Do not publish my name with my comment. " 
           CssClass="txtLabelComment" /> 
         </td> 
        </tr> 
        <tr> 
         <td > &nbsp;</td> 
         <td> 
          <asp:Button ID="btnSaveComments" runat="server" onclick="btnSaveComments_Click" 
           Text="Post Comment" /> 
         </td> 
        </tr> 
        <tr> 
         <td > &nbsp;</td> 
         <td> 
          &nbsp;</td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 

</ContentTemplate> 
    </asp:UpdatePanel> 
    </div> 
</asp:Panel> 

CSS文件

.inputContainer { 
    position: relative; 
    float: left; 
} 

.formError { 
    position: absolute; 
    top: 300px; 
    left: 300px; 
    display: block; 
    z-index: 5000; 
    cursor: pointer; 
} 

.ajaxSubmit { 
    padding: 20px; 
    background: #55ea55; 
    border: 1px solid #999; 
    display: none 
} 

.formError .formErrorContent { 
    width: 100%; 
    background: #b4984e; 
    position:relative; 
    z-index:5001; 
    color: #fff; 
    width: 150px; 
    font-family: tahoma; 
    font-size: 11px; 
    border: 2px solid #ddd; 
    box-shadow: 0 0 6px #000; 
    -moz-box-shadow: 0 0 6px #000; 
    -webkit-box-shadow: 0 0 6px #000; 
    padding: 4px 10px 4px 10px; 
    border-radius: 6px; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
} 

.greenPopup .formErrorContent { 
    background: #33be40; 
} 

.blackPopup .formErrorContent { 
    background: #393939; 
    color: #FFF; 
} 

.formError .formErrorArrow { 
    width: 15px; 
    margin: -2px 0 0 13px; 
    position:relative; 
    z-index: 5006; 
} 
body[dir='rtl'] .formError .formErrorArrow, 
body.rtl .formError .formErrorArrow { 
    margin: -2px 13px 0 0; 
} 

.formError .formErrorArrowBottom { 
    box-shadow: none; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    margin: 0px 0 0 12px; 
    top:2px; 
} 

.formError .formErrorArrow div { 
    border-left: 2px solid #ddd; 
    border-right: 2px solid #ddd; 
    box-shadow: 0 2px 3px #444; 
    -moz-box-shadow: 0 2px 3px #444; 
    -webkit-box-shadow: 0 2px 3px #444; 
    font-size: 0px; 
    height: 1px; 
    background: #b4984e; 
    margin: 0 auto; 
    line-height: 0; 
    font-size: 0; 
    display: block; 
} 

.formError .formErrorArrowBottom div { 
    box-shadow: none; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
} 

.greenPopup .formErrorArrow div { 
    background: #33be40; 
} 

.blackPopup .formErrorArrow div { 
    background: #393939; 
    color: #FFF; 
} 

.formError .formErrorArrow .line10 { 
    width: 15px; 
    border: none; 
} 

.formError .formErrorArrow .line9 { 
    width: 13px; 
    border: none; 
} 

.formError .formErrorArrow .line8 { 
    width: 11px; 
} 

.formError .formErrorArrow .line7 { 
    width: 9px; 
} 

.formError .formErrorArrow .line6 { 
    width: 7px; 
} 

.formError .formErrorArrow .line5 { 
    width: 5px; 
} 

.formError .formErrorArrow .line4 { 
    width: 3px; 
} 

.formError .formErrorArrow .line3 { 
    width: 1px; 
    border-left: 2px solid #ddd; 
    border-right: 2px solid #ddd; 
    border-bottom: 0 solid #ddd; 
} 

.formError .formErrorArrow .line2 { 
    width: 3px; 
    border: none; 
    background: #ddd; 
} 

.formError .formErrorArrow .line1 { 
    width: 1px; 
    border: none; 
    background: #ddd; 
} 

Answer 1

這主要是z-index問題。您使用的疊加層必須比那些錯誤信息完成者具有更高的z-index。嘗試找出您的項目中的錯誤信息容器的css，並設置一些最大z-index並嘗試。