Question

当我在asp.net c＃web form show中使用以下内联jQuery Based验证时，它可以正常工作。 http://www.aspdotnet-suresh.com/2012/01/jquery-beautiful-popup-form-validations.html

但是当我尝试在Ajax Modal Popup中使用相同的内容时，它会在屏幕截图中显示Modal弹出窗口后面的验证。 Screen shot of how it looks

它验证所有输入字段，但显示弹出窗口后面的验证，如图中红色箭头所示。我无法找到正确的CSS属性，因此它可以在弹出窗口上显示内联验证。

我使用链接上显示的相同的css和jquery文件我只修改了css的颜色属性以显示内嵌背景的金色颜色休息是一样的

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并尝试。

Ajax Modal Popup不会在弹出窗口上显示内联验证，而是在模式弹出窗口后面显示它

1 个答案: