Twitter Bootstrap modal: How to remove Slide down effect

Twitter Bootstrap modal: How to remove Slide down effect

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 documentation here:
But they don’t mention any options for changing the modal body slide effects.


Solution 1:

Just take out the fade class from the modal div.

Specifically, change:

<div class="modal fade hide">


<div class="modal hide">

UPDATE: For bootstrap3, the hide class is not needed.

Solution 2:

The modals used by the bootstrap use CSS3 to supply the effects and they can be removed by eliminating the appropriate classes from modals container div:

<div class="modal hide fade in" id="myModal">

As you can see this modal has a class of .fade, meaning it is set to fade in, meaning it will slide in. So just remove the class related to the effect you wish to remove, which in your case is just the .in class.

Related:  When is JavaScript's eval() not evil?

Edit: Just ran some tests and it appears that that is not the case, the .in class is added by javascript, though you can modify he slideDown behavior with css like so:

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


Solution 3:

If you like to have the modal fade in rather than slide in (why is it called .fade anyway?) you can overwrite the class in your CSS file or directly in bootstrap.css with this:

    -webkit-transition: opacity .2s linear, none;
    -moz-transition: opacity .2s linear, none;
    -ms-transition: opacity .2s linear, none;
    -o-transition: opacity .2s linear, none;
    transition: opacity .2s linear, none;
    top: 50%;

If you don’t want any effect just remove the fade class from the modal classes.

Solution 4:

I believe that most of these answers are for bootstrap 2. I ran into the same issue for bootstrap 3 and wanted to share my fix. Like my previous answer for bootstrap 2, this will still do an opacity fade, but will NOT do the slide transition.

Related:  jQuery - the good parts?

You can either change the modals.less or the theme.css files, depending on your workflow. If you haven’t spent any quality time with less, I’d highly recommend it.

for less, find the following code in MODALS.less

&.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
&.in .modal-dialog { .translate(0, 0)}

then change the -25% to 0%

Alternatively, if you’re using just the css, find the following in theme.css:

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;

and then change the -25% to 0%.

Solution 5:

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

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

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

Solution 6:

I didn’t like the slide effect either. To fix this all you have to do is make the the top attribute the same for both .modal.fade and You can take off the top 0.3s ease-out in the transitions too, but it doesn’t hurt to leave it in. I like this approach because the fade in/out works, it just kills the slide.

.modal.fade {
  top: 20%;
  -webkit-transition: opacity 0.3s linear;
     -moz-transition: opacity 0.3s linear;
       -o-transition: opacity 0.3s linear;
          transition: opacity 0.3s linear;
} {
  top: 20%;

If you’re looking for a bootstrap 3 answer, look here

Related:  Can I use javascript to dynamically change a video's source?