Twitter Bootstrap modal: How to remove Slide down effect

Question

Is there a way to change the Twitter Bootstrap Modal window animation from a slide down effect to a fadeIn or just display without the Slide? I read through the documentatio

Answer 1

.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

Answer 2

I solved this by overriding the default .modal.fade styles in my own LESS stylesheet:

.modal {
  &.fade {
    .transition(e('opacity .3s linear'));
    top: 50%;
  }
  &.fade.in { top: 50%; }
}

This keeps the fade in / fade out animation but removes the slide up / slide down animation.

Answer 3

you can also overwrite bootstrap.css by simply removing "top:-25%;"

once removed, the modal will simply fade in and out without the slide animation.

Answer 4

look at http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

Answer 5

just remove 'fade' class from modal class

class="modal fade bs-example-modal-lg"

as

class="modal bs-example-modal-lg"

Answer 6

The following CSS works for me - Using Bootstrap 3. You need to add this css after boostrap styles -

.modal.fade .modal-dialog{
    -webkit-transition-property: transform; 
    -webkit-transition-duration:0 ; 
    transition-property: transform; 
    transition-duration:0 ; 
}

.modal.fade {
   transition: none; 
}