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

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);

 }

Answer 2

Bootstrap modals fade in by default. Perhaps it is fading in too quickly for you to see? If you look at the css you can see they have transitions setup to make it fade in for .15 seconds:

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

Changing the fade in to one second, for demonstration purposes, may show you that it is in fact fading in.

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

Answer 3

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.