Ajax Модальное Всплывающее окно не показывает встроенную проверку поверх всплывающего окна, скорее оно показывает это позади модального всплывающего окна.

Question

Когда я использую следующую встроенную проверку на основе jQuery в asp.net c #, веб-форма показывается по ссылке ниже, она работает нормально.http://www.aspdotnet -suresh.com / 2012/01 / jquery-beautiful-popup-form-validations.html

Но когда я пытаюсь использовать то же самое в Ajax Modal Popup, он показываетпроверка модального всплывающего окна, как показано на снимке экрана.

Он проверяет все поля ввода, но показывает проверку позади всплывающего окна, как указано красными стрелками на изображении.Я не могу найти правильное свойство CSS, чтобы оно могло показывать встроенную проверку поверх всплывающего окна.

Я использую те же файлы CSS и JQuery, показанные по ссылке, я только изменил свойство цвета CSSчтобы показать встроенный фон в золотом цвете, все остальное

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

Я уверен, что кто-то должен был столкнуться с подобной проблемой и исправить ее. Любую помощь от CSS-гуру или любого, кто может помочь разобраться в этой проблеме, я пробовал, но я не очень хорош с CSS.

my .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 и попробуйте.