Fade in and out a Bootstrap 3 modal

Question

I have given my Bootstrap 3 modal a 'fade' class but the modal doesn't 'fade' in and out as I expect it to. It seems to slide in from above, rather than fade in.

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'd expect a 'fade' effect to look I've created this example: http://jsfiddle.net/spQp5/

How can I get my modal to 'fade' in and out like this?

Answer 1

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

You are referring to jQuery's fadeOut method, which is just not what Bootstrap fade class does. If you need to achieve this effect, don't rely on BS's libraries, and use jQuery.

Answer 2

The transitions are in the css and cause the modal to animate and slide down. If you're using LESS, you can modify these lines in modal.less to get whatever behavior you want using the transition mixins provided in the 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're not using LESS or the official Sass port, you can just take advantage of the cascading behavior of style sheets and add your override to a custom css file that is 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);

 }