When i use use following inline jQuery Based validation in asp.net c# web form show on the link below it works fine.
http://www.aspdotnet-suresh.com/2012/01/jquery-beautiful-popup-form-validations.html
But when i try to use the same in Ajax Modal Popup then it shows the validation behind the Modal popup as show in the screen shot. 
It validates all input fields but show the validation behind the popup as indicated by red arrows in the image. I am not able to find the right CSS property so that it can show inline validation on top of popup.
I am using same css and jquery files shown on the link i have only modified the color property of the css to show inline background in golden color rest is all same
http://www.aspdotnet-suresh.com/2012/01/jquery-beautiful-popup-form-validations.html
I am sure someone must have encountered similar problem and fixed it, Any help from CSS gurus or anyone who can help to sort this issue, i have tried but i am not good with CSS.
my .aspx page code
<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 File
.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;
}
It is mostly
z-indexproblem. The overlay which you are using must be having higherz-indexthan those error info contianers. Try to find out thecssfor error info containers in your project and set some maxz-indexand try.