Hide Bootstrap Modal With Fade Out Effect Using Javascript

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 moda

Solution 1:

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

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

Solution 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');
             });

Solution 3:

use jQuery :

$('#myModal').fadeOut();

Solution 4:

Make sure the HTML of your modal has the .fade class, Bootstrap will do the rest, per their documentation:

<divclass="modal fade">
  Modal content here
</div>

If you are still having trouble, you'll have to post more of your code.