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 modal to fade out properly using bootstrap's fade class - which currently doesn't happen, it instantly gets hidden.

How can I do this?

回答1:

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

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

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

回答3:

use jQuery :

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

回答4:

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

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

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

来源：https://stackoverflow.com/questions/39166660/hide-bootstrap-modal-with-fade-out-effect-using-javascript