Rectangle 27 36

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">
   ....
</div>

As you can see this modal has a class of .fade, meaning it is set to fade in and.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.

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;
}
modal.fade, .modal-backdrop.fade

it's probably better to edit the component-animations.less file, for the reason David mentions.

the fade class is optional, there is a better (and preferred per BS documentation) answer by Rose below

@umassthrower this answer is pretty old, at the time of writing that choice did not exist.

I'm not sure that comment is correct as BS 2.0 was released 3 months before that answer and I removed fade from my modals when using v2.0 last summer. Perhaps they didn't change the documentation until after that. Dunno.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 330

Just take out the fade class from the modal div.

<div class="modal fade hide">
<div class="modal hide">

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

Though the OP did ask for how to make it fade in so some of those answers are correct for the alternate formation of the question. Guess it's just a bad question because it's really 2 questions in one and no one has answered both questions in one answer.

@umassthrower is correct. Only how to have no transition is answered. The question of how to fade but not drop-down from the top is not covered by this answer.

I don't get how this is the correct answer... it makes the modal pop in with no fade, and OP has asked to remove the SLIDE, but not the FADE...

I'm waiting to keep the fade and remove the slide as well and this answer is not helpful. It's strange bootstrap used their fade class to also handle the slide effect for the modal as the fade is a entirely separate in their CSS.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 8

I have found the best solution that removes the slide but leaves the fade is by adding the following css in a css file of your chosing which is invoked after the bootstrap.css

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

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 30

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:

.modal.fade{
    -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.

The top: 50% seems to be causing trouble when the dialog closes. The dialog seems to be opening in the same place as before; but just before closing, for a split second it moves to center and then closes. Atleast in Chrome. Has anybody else noticed this too?

@lorem monkey - cheers, wanted the fade but not the slide. If anyone wants the scss/compass version... .modal.fade {@include transition(opacity .2s linear, none);}

@mohitp Instead of "top: 50%", I'm using "top: 25%". I also added .modal.fade.in { top: 25%; } Seems to have done the trick for me. Not certain why this works since I don't have the "in" class in my modal.

@dkrape the in class is added by Bootstrap.js

This is the right answer, answering both parts of the question.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 23

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.

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

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;
}
-25%
0%

I would override these styles in a custom stylesheet instead of editing Bootstrap's stylesheet/Less.

thanks! this works and this is the relevant answer!

this is the ONLY simple CSS solution to get FADE w/o slide. thx.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 18

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.

thank you. I ended up using 10% instead of 50%, and reduced the transition from .3s to .25s which seems a bit smoother to me.

Opening and closing a modal multiple times moves it up the page over time.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 11

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 modal.fade.in. 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;
}

.modal.fade.in {
  top: 20%;
}

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

The top two non-LESS examples above neglect the ".modal.fade.in" declaration, which makes the modal jump around a bit on closing. This one works great. Here it is in practice: jsfiddle.net/dkrape/4EwFq

This mostly works but I am seeing a bright blue horizontal line appear (in all of Safari, Firefox and Chrome) about 32px above my Modal when it appears.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 2

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.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 1

Just remove the fade class and if you want more animations to be perform on the Modal just use animate.css classes in your Modal.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 1

I'm working with bootstrap 3 and the Durandal JS 2 modal plugin. This question was on top of Google results and as none of the answers above is working for me I thought I'd share my solution for future visitors.

I override the default Bootstrap's Less code with this in my own less:

.modal {
  &.fade .modal-dialog {
    .translate(0, 0);
    .transition-transform(~"none");
  }
  &.in .modal-dialog { .translate(0, 0)}
}

That way I am left with only the fade effect, and no slideDown.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 0

The question was clear: remove only the slide: Here is how to change it in Bootstrap v3

&.fade .modal-dialog {
  //   .translate(0, -25%);

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 0

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

That will remove animation from showing and hiding. Works fine for me with Angular-Bootstrap ui also.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 0

Just take out the fade class from the modal div.

<div class="modal fade hide">
<div class="modal hide">

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

Though the OP did ask for how to make it fade in so some of those answers are correct for the alternate formation of the question. Guess it's just a bad question because it's really 2 questions in one and no one has answered both questions in one answer.

You don't have to modify the bootstrap sources. You only have to modify your html. This is the correct answer.

@umassthrower is correct. Only how to have no transition is answered. The question of how to fade but not drop-down from the top is not covered by this answer.

I don't get how this is the correct answer... it makes the modal pop in with no fade, and OP has asked to remove the SLIDE, but not the FADE...

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 0

I have found the best solution that removes the slide but leaves the fade is by adding the following css in a css file of your chosing which is invoked after the bootstrap.css

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

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 0

I'm working with bootstrap 3 and the Durandal JS 2 modal plugin. This question was on top of Google results and as none of the answers above is working for me I thought I'd share my solution for future visitors.

I override the default Bootstrap's Less code with this in my own less:

.modal {
  &.fade .modal-dialog {
    .translate(0, 0);
    .transition-transform(~"none");
  }
  &.in .modal-dialog { .translate(0, 0)}
}

That way I am left with only the fade effect, and no slideDown.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 0

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

That will remove animation from showing and hiding. Works fine for me with Angular-Bootstrap ui also.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 0

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 modal.fade.in. 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;
}

.modal.fade.in {
  top: 20%;
}

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

The top two non-LESS examples above neglect the ".modal.fade.in" declaration, which makes the modal jump around a bit on closing. This one works great. Here it is in practice: jsfiddle.net/dkrape/4EwFq

This mostly works but I am seeing a bright blue horizontal line appear (in all of Safari, Firefox and Chrome) about 32px above my Modal when it appears.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 0

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.

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

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;
}
-25%
0%

I would override these styles in a custom stylesheet instead of editing Bootstrap's stylesheet/Less.

thanks! this works and this is the relevant answer!

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 0

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">
   ....
</div>

As you can see this modal has a class of .fade, meaning it is set to fade in and.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.

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;
}
modal.fade, .modal-backdrop.fade

it's probably better to edit the component-animations.less file, for the reason David mentions.

the fade class is optional, there is a better (and preferred per BS documentation) answer by Rose below

@umassthrower this answer is pretty old, at the time of writing that choice did not exist.

I'm not sure that comment is correct as BS 2.0 was released 3 months before that answer and I removed fade from my modals when using v2.0 last summer. Perhaps they didn't change the documentation until after that. Dunno.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap
Rectangle 27 0

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.

thank you. I ended up using 10% instead of 50%, and reduced the transition from .3s to .25s which seems a bit smoother to me.

Opening and closing a modal multiple times moves it up the page over time.

javascript - Twitter Bootstrap modal: How to remove Slide down effect ...

javascript jquery jquery-ui twitter-bootstrap