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 documentation here   http   getbootstrap com javascript  modals  But they don t mention any options for changing the modal body slide effects

User · Answer

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

User · Answer

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    amp  fade  modal-dialog      translate 0  -25       transition-transform   0 3s ease-out       amp  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

User · Answer

Wanted to update this  Most of you have not completed this issue  I m using Bootstrap 3  none of the fixes above worked    to remove the slide effect but keep the fade in  I went into bootstrap css and  noted out the following selectors  - this resolved the issue     modal fade  modal-dialog   -webkit-transform translate 0 -25   -ms-transform translate 0 -25   transform translate 0 -25   -webkit-transition -webkit-transform  3s ease-out -moz-transition -moz-transform  3s ease-out -o-transition -o-transform  3s ease-out transition transform  3s ease-out       modal in  modal-dialog   -webkit-transform translate 0 0  -ms-transform translate 0 0  transform translate 0 0

User · Answer

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    lt div class  modal hide fade in  id  myModal  gt           lt  div gt    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      Demo

User · Answer

modal fade   modal fade  modal-dialog       -webkit-transition  none      -moz-transition  none      -ms-transition  none      -o-transition  none      transition  none

User · Answer

The question was clear  remove only the slide  Here is how to change it in Bootstrap v3  In modals less comment out the translate statement    amp  fade  modal-dialog           translate 0  -25

User · Answer

just remove  fade  class from modal class  class  modal fade bs-example-modal-lg    as  class  modal bs-example-modal-lg

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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      amp  fade  modal-dialog        translate 0  0        transition-transform   none           amp  in  modal-dialog    translate 0  0       That way I am left with only the fade effect  and no slideDown

User · Answer

I solved this by overriding the default  modal fade styles in my own LESS stylesheet    modal      amp  fade        transition e  opacity  3s linear         top  50          amp  fade in   top  50         This keeps the fade in   fade out animation but removes the slide up   slide down animation

User · Answer

Just take out the fade class from the modal div   Specifically  change    lt div class  modal fade hide  gt    to    lt div class  modal hide  gt      UPDATE  For bootstrap3  the hide class is not needed

User · Answer

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

User · Answer

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

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to twitter-bootstrap