我有一个包含某些字段的表单，但是当我提交它而没有输入任何数据（空）时，它会向黑暗覆盖的一侧提供电话验证错误，然后无法再与页面进行交互。我希望用户看到该消息，他也应该能够与该页面进行交互。
/**
* Checks the phone number field validity. Shows a modal popup if the format is not correct.
*/
$(document).ready(function() {
var form_submitted = false;
$('#save_form').click(function() {
if (form_submitted) {
alert('Your quiz submission is being processed. Sometimes this can take up to a minute. Please be patient while you are redirected to your results page.');
return false;
}
var phone = $('#telefon').val();
var location = $('#state').val();
var matching_string = /^(([0]{2})?[\+]?[1]( |-)?)?(\(?[0-9]{3}\)?|[0-9]{3})?( |-)?([0-9]{3}( |-)?[0-9]{4})$/;
var phone_match = matching_string.test(phone.trim());
if (phone == '') {
$('#basic-modal-content').html('<h3 class="ess_error">Validation Check</h3><p>Phone number cannot be blank.</p>');
$('#basic-modal-content').modal();
return false;
} else {
/*Added an additional check for the NON US customers. Phone number validation will only happen for US customers. 52 being the primary key for NON US in state table*/
if (location != 52) {
if (phone_match) {
// TODO: Uncomment
//$('#save_form').css("background", "url(/images/bodytypequiz/BTN-BTQ-TestResults-Processing.png) no-repeat");
// TODO: Comment out below two lines
$('#save_form').html('<img src="/images/bodytypequiz/BTQ-OptInSlide-SubmitButtonSubmitMessage-v1.0.png">');
$('#save_form').css("left", "78px").css("width", "350px");
form_submitted = true;
$('#save').submit();
} else {
$('#basic-modal-content').html('<h3 class="ess_error">Validation Check</h3><p>Please enter a valid US phone number.</p>');
$('#basic-modal-content').modal();
return false;
}
} else {
// TODO: Uncomment
//$('#save_form').css("background", "url(/images/bodytypequiz/BTN-BTQ-TestResults-Processing.png) no-repeat");
// TODO: Comment out below two lines
$('#save_form').html('<img src="/images/bodytypequiz/BTQ-OptInSlide-SubmitButtonSubmitMessage-v1.0.png">');
$('#save_form').css("left", "78px").css("width", "350px");
form_submitted = true;
$('#save').submit();
}
}
});
HTML：
<div class="col-md-6">
<?php echo form_tag(url_for('@bodytype_quiz_save'), 'id=save') ?>
<?php /* <div class="form-group form-inline">
<label for="age" >In what age range do you fall into?<em class="required">*</em></label>
<?php echo select_tag('age', options_for_select($age_aria, $form_vars['age']), array('class' => 'form-control')) ?>
</div>
<div class="form-group">
<?php echo radiobutton_tag('sex[]', 1, $form_vars['male']) ?> <label for="sex_1_1">Male</label>
<?php echo radiobutton_tag('sex[]', 2, $form_vars['female']) ?> <label for="sex_2_2">Female</label>
</div> */ ?>
<div class="form-group">
<label for="comm">What main struggle are you having with your body now?</label>
<textarea cols="40" rows="4" id="comm" name="comm" class="form-control"><?php echo $form_vars['comm'] ?></textarea>
</div>
<div class="form-group form-inline">
<label for="age">What age did you start gaining? <em class="required">*</em></label>
<?php echo select_tag('age', options_for_select($age_aria, $form_vars['age']), array('class' => 'form-control')) ?>
</div>
<div class="form-group form-inline">
<label for="state">Which state do you live in? <em class="required">*</em></label>
<?php echo select_tag('state', options_for_select($st_aria, $form_vars['state']), array('class' => 'form-control')) ?>
</div>
<table class="btq-table">
<tr>
<td width="22%">
<label>Name: <em class="required">*</em></label>
</td>
<td width="58%">
<input type="text" id="name" name="name" value="<?php echo $form_vars['name'] ?>" class="form-control" />
</td>
<td width="20%">
<span class="text-tertiary">Kept Private</span>
</td>
</tr>
<tr>
<td>
<label>Email: <em class="required">*</em></label>
</td>
<td>
<input type="text" name="email" id="email" value="<?php echo $form_vars['email'] ?>" class="form-control" />
</td>
<td>
<span class="text-tertiary">Kept Private</span>
</td>
</tr>
<tr>
<td>
<label>Cell Phone: <em class="required">*</em></label>
</td>
<td>
<input required type="text" name="telefon" id="telefon" value="<?php echo $form_vars['telefon'] ?>" class="form-control" />
</td>
<td>
<span class="text-tertiary">Kept Private</span>
</td>
</tr>
</table>
<?php if($error == 1): ?>
<p><b id="wait" class="red">Some or all of the required fields are empty.</b></p>
<?php endif;?>
<div class="form-group text-center">
<!--<input type="submit" id="submit" name="submit" class="btn btn-tertiary btn-lg" value="ANALYZE" />-->
<div id="save_form" class="Cursor-pointer" style="background:url(/images/bodytypequiz/BTN-BTQ-TestResults.png) center center;width:320px;height:44px;margin:0 auto;"> </div>
</div>
</form>
</div>
<div class="col-md-6 text-center">
<h3 class="heading-tertiary">Find Out Your Primary Body Type Now!</h3>
<div class="thumbnail mb-lg">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/<?php echo $video_id ?>" frameborder="0" allowfullscreen></iframe>
</div>
<div class="clearfix"></div>
<h3 class="heading-tertiary mt-md">Which ONE Is Your Primary Type ?</h3>
</div>
<div class="clearfix"></div>
<div class="text-center mt-lg">
<small>
We never give away your email, phone or personal information.<br />
We'll send you some tips. By proceeding, you agree to our
<a href="<?php echo url_for('terms/tacpopup'); ?>" target="_blank">Terms & Conditions</a>
and <a href="<?php echo url_for('terms/polpopu'); ?>" target="_blank">Privacy Policy</a>.
</small>
</div>
<?php else: ?>
<div class="text-center">
<div class="thumbnail col-md-6 col-md-offset-3">
<!--https://youtube.com/embed/ifaCNwzy0gI?autoplay=1-->
<iframe width="100%" height="315" src="https://youtube.com/embed/ifaCNwzy0gI" frameborder="0" allowfullscreen></iframe>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-6 text-center col-md-offset-1">
<h1 class="text-warning text-bold">FREE Adrenal Body Type <br />REPORT</h1>
</div>
<div class="col-md-3 text-center col-md-offset-0">
<a href='javascript://' data-opf-trigger='p2c12528f12' id="open_popup_lnk" class="btn btn-warning btn-block btn-lg text-size-32 text-bold">
<i class="fa fa-file-pdf-o"></i> View PDF
</a>
<script type='text/javascript' async='true' src='https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js' data-opf-uid='p2c12528f12' data-opf-params='borderColor=#fff&borderSize=20px&formHeight=552&formWidth=80%&popPosition=mc&instance=686239622'></script>
</div>
<?php endif; ?>
</div>
</div>
</div>
<div id="basic-modal-content"></div>
答案 0 :(得分：0)
问题似乎是您通过$('#basic-modal-content').modal();调用在页面顶部打开一个空的模态窗口。如果你检查页面上的元素，我打赌你会发现那里有一个巨大的div超过一切。