How to close Bootstrap 3 modally programmatically if AJAX succeeds?

Question

I have some code that I would like to do to close the modal success of ajax. 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 is run $('#deleteContactModal').modal('hide'); , it just displays a black faded screen similar to this:

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

I am using bootstrap 3.3 .

Answer 1

try adding this attribute with your modal div aria-hidden="true"

eg:

 <div aria-hidden="true" class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 

Here is my working example

 <div class="modal fade" id="copy_course_modal" tabindex="-1" role="dialog" aria-labelledby="copycourse" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="purchaseLabel">Copy Chapter</h4> </div> <div class="modal-body"> Modal body content here </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" onclick="saveCopiedCourse()">Copy Course</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

and if successful.

 $("#copy_course_modal").modal('hide'); 

Answer 2

I have the exact same problem, and the only way to find work is to individually remove parts of the modal. Just put this function in js js and make the onclick event on your button in html or js. Hope I helped.

 function hideModal(){ $(".modal").removeClass("in"); $(".modal-backdrop").remove(); $('body').removeClass('modal-open'); $('body').css('padding-right', ''); $(".modal").hide(); } 

Answer 3

Try:

 $(".modal.in").modal("hide"); 

This will hide the current active mode.

Answer 4

Go to this question yourself in a similar situation.

This seems to be due to the asynchronous nature of the javascript + bootstrap animation.

This is a dirty dirty hack, but the completion of the “hide” call in timeout made it work for me:

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

When using this “solution” for the problem, you may need to adjust the timeout value. Bootstrap animation seems to take about 125-200 ms, so 300 provides a good security buffer.

Answer 5

 $('#deleteContactModal').modal('hide') 

Find this link

https://getbootstrap.com/docs/3.3/javascript/#modal-hide

Here https://getbootstrap.com/docs/3.3/javascript/#modal-hide is described in detail with respect to the model window

Answer 6

Simple softkey "Close" dialog box.

$ ("Button [reject data = \" modal \ "]") press the button () ;.

This will automatically close the dialog.

Answer 7

This is just a synchronization issue. Fade animation takes time, and javascript cannot close it. just cancel the fade animation and it works correctly!

 <div class="modal" tabindex="-1" role="dialog" aria-labelledby="..."> ... </div> 

(Do not use class = "modal fade", jus class = "modal")

Answer 8

I tried several suggested solutions, and the only one that worked for me was:

$ ("modal.in.") Modal ('hide') ;.

Some of them cleared the modal and background, but then he did not redraw subsequent calls.

Answer 9

None of these options worked for me, except for the one that said don't use modal attenuation. However, I wanted to use modal attenuation. My code made an ajax call to save the changes, and then, if successful, did this:

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

The problem was that doRefresh was updating the page in modal mode. If I deleted doRefresh, it worked. So what I ended up doing is:

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

Answer 10

This problem will be solved by hiding individual modal elements. Such as:

  $("#modal").modal('hide'); $('body').removeClass('modal-open'); $(".modal-backdrop").remove(); 

Answer 11

Clear background

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

tested in BS4

Answer 12

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 a 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 that after success, ajax will call the StopLoadingAnimation function, which will trigger the click event on the btnCloseModal element (as if you press the btnCloseModal button when you close the modal window)

Answer 13

 $.ajax({ type: "POST", url: "admin/pc-item-insert.php", data: $(this).serialize(), success: function(data) { $("#showinfo").html(data); $(".modal").modal("hide"); }, });