我有一个模态，里面有一个形式。我试图提交表单而不使用Ajax刷新页面，但是我成功提交了表单，但是无法隐藏模式。
其中包含表单的引导程序模式：
<div class="modal fade" id="exampleModalCenter" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<form >
<div class="modal-body">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill"
href="#pills-home" role="tab" aria-controls="pills-home" aria-
selected="true">CreditCard/DebitCard</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill"
href="#pills-profile" role="tab" aria-controls="pills-profile"
aria-selected="false">Paypal</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill"
href="#pills-contact" role="tab" aria-controls="pills-contact"
aria-selected="false">Quickpay</a>
</li>
</ul>
<div class='pt-1 pb-1 pl-2 text-danger text-center' id="payment-
error">Please enter all card details!</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home"
role="tabpanel" aria-labelledby="pills-home-tab">
<div class="form-group">
<label for="amount">Amount</label>
<div class="input-group">
<input type="number" name="amount" id="modal_amount"
class="form-control" placeholder="Enter Donation amount"
autocomplete="amount" value="">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-money"></i></span></div>
</div>
</div>
<div class="form-group">
<label for="name">CardHolder Name</label>
<div class="input-group">
<input type="text" name="name" class="form-control"
placeholder="Enter Name" autocomplete="name" id="modal_name"
value="">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-user"></i></span></div>
</div>
</div>
<div class="form-group">
<label for="cardnumber">Card Number</label>
<div class="input-group">
<input type="tel" name="cardnumber" class="form-control"
placeholder="Valid Card Number" autocomplete="cc-number"
value="" id="modal_number">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-credit-card"></i></span></div>
</div>
</div>
<div class="row">
<div class="col-7">
<div class="form-group">
<label for="expdate">Expiry Date</label>
<div class="input-group">
<input type="tel" name="expdate" class="form-control"
placeholder="MM/YY" autocomplete="exp-date" value=""
id="modal_expdate">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-calendar"></i></span></div>
</div>
</div>
</div>
<div class="col-5">
<div class="form-group">
<label for="cvv">CVV</label>
<div class="input-group">
<input type="password" name="cvv" class="form-control"
placeholder="Enter CVV" autocomplete="cvv" maxlength="3"
value="" id="modal_cvv">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-key" ></i></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-
labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-
labelledby="pills-contact-tab">...</div>
</div>
<input type="hidden" name="fundid" id="fundid">
</div>
<div class="modal-footer">
<button type="submit" class="form-control btn btn-primary btn-small"
name="fundraiser" id="fundraiser">Submit</button>
</div>
</form>
</div>
</div>
</div>
上述模式的Ajax代码：
$('document').ready(function(){
$('#event-error').hide();
$('.event-alert').hide();
$('#payment-error').hide();
$('.payment-alert').hide();
// fundraiser modal form submission
$('#fundraiser').click(function(){
var cardname = $('#modal_name').val();
var cardnumber = $('#modal_number').val();
var amount = $('#modal_amount').val();
var expdate = $('#modal_expdate').val();
var cvv = $('#modal_cvv').val();
var fundid = $('#fundid').val();
var payment_data = 'card-name=' + cardname + '&card-number=' + cardnumber
+ '&amount=' + amount + '&expdate=' + expdate + "&cvv=" + cvv +
'&fundid=' + fundid;
if( cardname == "" || cardnumber == "" || amount == "" || expdate == ""
|| amount == "")
{
$('#payment-error').show();
return false;
}
else{
$.ajax({
type: "POST",
url: "fund_data.php",
data: payment_data,
success: function(){
$('.payment-alert').delay(1000).show();
}
});
$('#modal_name').val("");
$('#modal_number').val("");
$('#modal_amount').val("");
$('#modal_expdate').val("");
$('#modal_cvv').val("");
return false;
}
});
弹出Modal后，我会在表格中提供付款的随机卡详细信息，并在提交表格后，使用ajax post call将详细信息发布到db中，并显示警告提示付款成功。但是我无法关闭模式。请解决这个问题吗？
答案 0 :(得分：1)
您必须调用hide()函数才能关闭模态。
$.ajax({
type: "POST",
url: "fund_data.php",
data: payment_data,
success: function(){
$('.payment-alert').delay(1000).show();
$('#exampleModalCenter').modal('hide'); // here you hide the modal
}
});
仅设置.val("");不会隐藏它。
答案 1 :(得分：0)
您使用以下命令关闭Bootstap模式
$(selector).modal('hide');
隐藏所有模态
$('.modal').modal('hide');
因此，如果您只想在AJAX调用成功时关闭模式，则可以执行以下操作：
$.ajax({
type: "POST",
url: "fund_data.php",
data: payment_data,
success: function(){
$('.payment-alert').delay(1000).show();
$('.modal').modal('hide');
}
});