Hide Bootstrap modal with fade out effect using Javascript

Question

I have a basic bootstrap modal to log in, which doesn't close itself when I hit submit. I solved it using this simple jquery:

$('#myModal').modal('hide');

But I also want the modal to fade out properly using bootstrap's fade class - which currently doesn't happen, it instantly gets hidden.

How can I do this?

Answer 1

$('#myModal').delay(1000).fadeOut(450);

 setTimeout(function(){
    $('#myModal').modal("hide");
 }, 1500);

Answer 2

You can pass the duration of the fade effect to the fadeout function. then pass a callback function as a second parameter. In the body of the callback function, you then hide the modal window

   $('#myModal').fadeOut(500,function(){
                $('#myModal').modal('hide');
             });