How to close Bootstrap 3 modal programmatically on AJAX success?

user_4698790 0
Viewed 23953

I have a code that what I wanted to do is to close the modal on ajax success. This is my code:

script

success: function() {
    console.log("delete success");
    $('#deleteContactModal').modal('hide');
    $( "#loadContacts" ).load( "/main/loadContacts" );

}

html

<div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
<!--everything goes here -->
    </div>
  </div>
</div>

Everything just works except when the code $('#deleteContactModal').modal('hide'); triggers, it just shows a black faded screen like this:

enter image description here

The modal closes but the black faded color is still present. Am I missing something here? Thank you in advance.

I'm using bootstrap 3.3.

twitter-bootstrap-3 twitter-bootstrap jquery ajax javascript
13 Answers

Ran into this issue myself in a similar situation.

It seems to be related to the asynchronous nature of javascript + bootstrap animations.

It's a dirty, dirty hack, but wrapping the call to 'hide' in a timeout made it work for me:

setTimeout( function(){$("#myModal").modal('hide')}, 300 );

If employing this "solution" to the problem, you may need to adjust the timeout value. Bootstrap animations seem to take around 125 - 200 ms, so 300 provides a nice safety buffer.

user_47931160
user_22355770

This issue will solve by hiding individual elements of modal. Such as : 

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();
user_92793150 
$.ajax({
    type: "POST",
    url: "admin/pc-item-insert.php",
    data: $(this).serialize(),
    success: function(data) {
        $("#showinfo").html(data);
        $(".modal").modal("hide");                  
    },
});
user_91974900

None of these options worked for me apart from the one that said don't use modal fade. However I wanted to use modal fade. My code was making an ajax call to save changes, and then on success was doing this:

$('#myModal').modal('hide');
doRefresh();

The problem was doRefresh was then updating the page under the modal. If I removed the doRefresh, it worked. So what I ended up doing was this:

$('#myModal').modal('hide');
setTimeout(doRefresh, 500);
user_33659230

To clear the backdrop

$(".modal-backdrop").toggleClass("hide, show");

tested in bs4

user_32382430

I define my modal :

<div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>Waiting</strong>
            </div>
            <div class="modal-content">
                <div>
                    Please don't close your tab!
                </div>
                <div class="d-flex justify-content-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <strong>Loading...</strong>
            </div>
        </div>
    </div>
</div>

then I create function :

  var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
    console.log("trigger show");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
    console.log("trigger");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
    console.log("event");
    $(e.currentTarget).off('shown');
    $(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");
}

My idea is after ajax success is will call function StopLoadingAnimation what will trigger event click on element btnCloseModal ( It like you click button btnCloseModal when you closing modal )

user_76479210
Related