引导模式在使用ajax调用提交表单后未关闭？

Question

我有一个模态，它有一个形式。我试图提交表单而不使用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调用将详细信息发布到db中，并显示支付成功的警报。但是，我无法关闭模式。请解决这个问题？？

Answer 1

您可以使用关闭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');
    }
});

Answer 2

您必须调用hid（）函数才能关闭模态。

$.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("");不会隐藏它。