How to close Bootstrap 3 modal programmatically on AJAX success?

Question

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:

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.

Solution 1

try to add 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 on success doing same.

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

Solution 2

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

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

Solution 3

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.

Solution 4

Try:

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

This will hide the currently active modal.

Solution 5

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

Find this link

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

It gives detail https://getbootstrap.com/docs/3.3/javascript/#modal-hide regarding model window

View more solutions

Comments

[Nick]

Code only answers are discouraged. Please add some explanation as to how this solves the problem, or how this differs from the existing answers. From Review

[Janbalik]

Thanks!!! This is the unique option which worked for me ;)