Claudia Man II Claudia Man II - 1 year ago 109
Ajax Question

Closing bootstrap modal on ajax success

i've a sign-in href link that toggles the modal and load a page within an iframe.. upon successful login the modal doesn't close. been searching around here and most of the answers are to add in the line


tried that but it didn't work. is there any conflict within my code?


<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="max-width:400px;max-height:400px;width:94%;height:75%;float:right;margin:50px 12px 0 0">
<div class="modal-content" style="position:relative;width:100%;height:100%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<span style="color:black;font-weight:900;">Login</span>
<div class="modal-body" style="position:absolute;display:inline-block;width:100%;height:100%;">
<iframe src="login.php" frameborder="0" scrolling="no" allowtransparency="true" style="width:100%;height:90%;"></iframe>


url: url,
type: "post",
data: val,
datatype: 'json',
success: function(data) {
if (data.status == "valid") {
$("input").prop('disabled', true);
$("#login_btn").prop('value', 'Logging in ...');
else {
$('#msg').html("<font color=red>" +data.message+ "</font>")

Answer Source

I had a similar issue and it was driving me crazy. As a result I came up with a kind of crazy solution.

I added a class to the template used to create the popover. Here's the template used as an option to the popover() function:

template: '<div class="popover popover-width-control add-calendar-event"><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',

The key here is the addition of the class add-calendar-event. Then to get hide the modal I used: