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?

Solution 1

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

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

 }

Solution 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.

Comments

[henrywright]

Thanks for the fiddle! I'm not bothered about using BS library for this, jQuery will be fine. I just don't know how to apply it to my modal

[henrywright]

This is certainly what's happening. I can now see the fade effect but a) the modal still 'slides' in from the top and b) fading out doesn't happen. See here jsfiddle.net/KqXBM/1

[david]

The sliding from the top part comes from the "modal-dialog" class. Specifically with the selector ".modal.fade .modal-dialog".

[jme11]

add my answer below to remove the slide behavior

[Avanish Kumar]

Hello @david It's working for fade in effect but not fade out

[Marc Roussel]

It's better then before but not very elegant with the backdrop when closing the modal jsfiddle.net/KqXBM/149