【发布时间】：2012-01-27 19:51:58
【问题描述】：
当我在下面的链接上显示的 asp.net c# web 表单中使用以下基于 jQuery 的内联验证时，它可以正常工作。 http://www.aspdotnet-suresh.com/2012/01/jquery-beautiful-popup-form-validations.html
但是当我尝试在 Ajax 模态弹出窗口中使用相同的内容时，它会显示模态弹出窗口背后的验证，如屏幕截图所示。
它验证所有输入字段，但在弹出窗口后面显示验证，如图像中的红色箭头所示。我无法找到正确的 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>
*
</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>
*
</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>
*</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>
*</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 > </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 > </td>
<td>
<asp:Button ID="btnSaveComments" runat="server" onclick="btnSaveComments_Click"
Text="Post Comment" />
</td>
</tr>
<tr>
<td > </td>
<td>
</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;
}
【问题讨论】：
-
您可以发布您的任何标记吗？从该屏幕截图生成的 HTML/CSS 在这里真的很有帮助。
-
我已经发布了 HTML 并且主 css 使用了我的内联验证 jQuery。此链接上代码如何工作的另一个示例position-relative.net/creation/formValidator/demos/…
标签： c# jquery asp.net validation