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.

Answer 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');