Fade and Download Bootstrap 3 modal

Question

I provided Bootstrap 3 modal with the 'fade' class, but the modal does not “fade” in the way I expect to. It seems to slide on top and not disappear.

Modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 

Trigger button:

 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> 

To show an example of how I would expect a fade effect, I created this example: http://jsfiddle.net/spQp5/

How can I make my modal “disappear” in this way?

Answer 1

Bootstrap modifications by default disappear. Perhaps it disappears too fast for you to see? If you look at css, you will see that they have transition settings to make them fade out for .15 seconds:

 .fade { opacity: 0; -webkit-transition: opacity .15s linear; transition: opacity .15s linear; } 

Changing the attenuation by one second for demonstration purposes may show you that it is actually disappearing.

 .fade { opacity: 0; -webkit-transition: opacity 1s linear; transition: opacity 1s linear; } 

Answer 2

Transitions are in css and lead modal to animation and slide down. If you use LESS, you can change these lines in modal.less to get whatever behavior you want using the transition mixins provided in mixins or component-animations.less (or your own):

  // When fading in the modal, animate it to slide down &.fade .modal-dialog { .translate(0, -25%); .transition-transform(~"0.3s ease-out"); } &.in .modal-dialog { .translate(0, 0)} 

If you are not using LESS or the official Sass port, you can simply use the cascading behavior of the stylesheets and add an override to the custom css file loaded after the bootstrap.css file.

  .modal.fade .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); // IE9 only transform: translate(0, 0); } 

Answer 3

Script for your code: http://jsfiddle.net/KqXBM/

You mean the jQuery fadeOut method, which is not a Bootstrap fade class. If you need to achieve this effect, don't rely on BS libraries and use jQuery.