Bootstrap modal hide is not working

Question

Bootstrap modal hide is not working. Alert comes in else. but my modal is not hidden Added bootply. My issue is the same one.

Answer 1

Before you open a loading modal, make sure that you close all others. This is the function is use to close the modal:

function hideLoadingModal() {
    $('#loadingModal').on('shown.bs.modal', function () {
        $('#loadingModal').modal('hide');      
    }); 
}

Now if I want to open the modal I call the above function and open a new one after that. Like this:

hideLoadingModal();
$('#loadingModal').modal('show');

Hope this helps you.

Cheers

Answer 2

I had the same issue. I tried the JavaScript way suggested in the post, unfortunately it only worked half of the time. If I triggered my modal a few times, it bugs out. As a result I created a work around using CSS:

/* Hide the back drop*/
.modal-backdrop.show {
    display: none;
}
/* Simulate the backdrop using background color */
.modal-open .modal {
    background-color: rgba(47, 117, 19, 0.3);
}

Answer 3

try to add return false like this:

$("#buy").click(function () { 
  var a = 4;
  if (a == 5) {
    alert("if");
    $('#myModal').modal('show');
  }
  else {
    alert("else");
    $('#myModal').modal('hide');
  }
  return false;
});

Answer 4

As I encountered, sometimes you need to remove display style:

style="display: block;"

Answer 5

For those still having issues (hi Googlers!), if you're using fade, you'll have to use javascript to remove fade class.

Answer 6

In the java script code you need to add one line of code

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });