Fade in and out a Bootstrap 3 modal

css, html, javascript, jquery, twitter-bootstrap-3

Solution

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

Problem

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?

Original source