0
691
ViewsHow to close Bootstrap 3 modal programmatically on AJAX success?
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.
3 answers
Answer question0
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">×</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');
0
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();
}
0
Try:
$(".modal.in").modal("hide");
This will hide the currently active modal.