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.

digitalextremist · Accepted Answer · 2014-04-04 20:59:58Z

366

Just take out the fade class from the modal div.

Specifically, change:

<div class="modal fade hide">

to:

<div class="modal hide">

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

edited Apr 4, 2014 at 20:59

digitalextremist

5,9934 gold badges44 silver badges63 bronze badges

answered Aug 3, 2012 at 22:05

Rose Perrone

62.9k60 gold badges213 silver badges247 bronze badges

9

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
Commented Apr 1, 2013 at 4:28
1

You don't have to modify the bootstrap sources. You only have to modify your html. This is the correct answer.
– mpccolorado
Commented Aug 29, 2013 at 21:25
32

@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.
– Synesso
Commented Sep 28, 2013 at 1:15
28

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...
– Shawn Taylor
Commented Aug 27, 2014 at 7:39
2

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.
– Leeish
Commented Nov 14, 2014 at 16:53

| Show 9 more comments

Rubens Mariuzzo · Accepted Answer · 2014-08-27 21:51:36Z

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

Demo

edited Aug 27, 2014 at 21:51

Rubens Mariuzzo

29k27 gold badges122 silver badges149 bronze badges

answered Apr 13, 2012 at 15:13

Andres I Perez

75.3k21 gold badges158 silver badges139 bronze badges

2

You should also add it to the backdrop: modal.fade, .modal-backdrop.fade etc...
– David Hellsing
Commented Sep 24, 2012 at 15:09
it's probably better to edit the component-animations.less file, for the reason David mentions.
– Peter Hanley
Commented Feb 8, 2013 at 21:46
the fade class is optional, there is a better (and preferred per BS documentation) answer by Rose below
– umassthrower
Commented Apr 1, 2013 at 4:25
@umassthrower this answer is pretty old, at the time of writing that choice did not exist.
– Andres I Perez
Commented Apr 1, 2013 at 4:28
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.
– umassthrower
Commented Apr 1, 2013 at 4:34

| Show 6 more comments

lorem monkey · Accepted Answer · 2012-08-15 22:06:07Z

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.

answered Aug 15, 2012 at 22:06

lorem monkey

3,9823 gold badges36 silver badges49 bronze badges

1

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?
– mohitp
Commented Mar 16, 2013 at 15:07
1

@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);}
– Simon
Commented May 10, 2013 at 12:15
1

@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.
– Darren
Commented May 24, 2013 at 0:13
2

@dkrape the in class is added by Bootstrap.js
– Dave Sag
Commented Sep 9, 2013 at 6:07
This is the right answer, answering both parts of the question.
– matt
Commented Jan 30, 2014 at 0:36

Add a comment |

viggity · Accepted Answer · 2013-11-04 21:30:33Z

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

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%.

I would override these styles in a custom stylesheet instead of editing Bootstrap's stylesheet/Less. — Bassem, Commented Mar 19, 2014 at 19:08
this is the ONLY simple CSS solution to get FADE w/o slide. thx. — davideghz, Commented Jul 18, 2017 at 7:40

Alex Bain · Accepted Answer · 2012-10-23 22:30:39Z

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.

answered Oct 23, 2012 at 22:30

Alex Bain

8017 silver badges12 bronze badges

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.
– isapir
Commented Jul 8, 2013 at 21:23
Opening and closing a modal multiple times moves it up the page over time.
– Leeish
Commented Nov 14, 2014 at 16:37

Add a comment |

justinazz · Accepted Answer · 2014-06-09 13:00:05Z

14

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

edited Jun 9, 2014 at 13:00

answered Jun 4, 2014 at 12:29

justinazz

1411 silver badge4 bronze badges

1

This is the best answer for Bootstrap 3 in order to keep the fade but remove the slide down
– NickH
Commented Mar 24, 2015 at 16:19
2

This solution works fine for Bootstrap 4 too. Thanks!
– aprovent
Commented May 17, 2018 at 6:23

Add a comment |

Community · Accepted Answer · 2017-05-23 12:17:54Z

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

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Mar 29, 2013 at 4:16

viggity

15.2k7 gold badges90 silver badges97 bronze badges

1

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
– Darren
Commented May 24, 2013 at 0:29
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.
– Dave Sag
Commented Sep 9, 2013 at 6:14

Add a comment |

Kapil Kumar · Accepted Answer · 2015-11-16 05:54:33Z

3

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.

answered Nov 16, 2015 at 5:54

Kapil Kumar

1433 bronze badges

Add a comment |

Amr Morsy · Accepted Answer · 2013-04-27 09:53:31Z

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.

answered Apr 27, 2013 at 9:53

Amr Morsy

1863 bronze badges

Add a comment |

Konstantin XFlash Stratigenas · Accepted Answer · 2018-08-25 18:41:30Z

2

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

answered Aug 25, 2018 at 18:41

Konstantin XFlash Stratigenas

6016 silver badges10 bronze badges

Add a comment |

David · Accepted Answer · 2014-05-01 09:45:41Z

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.

SM Adnan · Accepted Answer · 2015-01-11 11:18:38Z

1

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

answered Jan 11, 2015 at 11:18

SM Adnan

5552 silver badges10 bronze badges

That will remove animation from showing and hiding. Works fine for me with Angular-Bootstrap ui also.
– SM Adnan
Commented Jan 11, 2015 at 11:19

Add a comment |

Derry Birkett · Accepted Answer · 2015-06-18 03:29:36Z

1

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:

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

answered Jun 18, 2015 at 3:29

Derry Birkett

464 bronze badges

Add a comment |

Abeysinghe · Accepted Answer · 2020-01-07 14:33:46Z

1

just remove 'fade' class from modal class

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

as

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

answered Jan 7, 2020 at 14:33

Abeysinghe

194 bronze badges

Add a comment |

tmarois · Accepted Answer · 2014-02-14 02:47:58Z

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

Ignacio Vazquez · Accepted Answer · 2015-04-23 20:23:50Z

0

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

answered Apr 23, 2015 at 20:23

Ignacio Vazquez

5445 silver badges9 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Twitter Bootstrap modal: How to remove Slide down effect

16 Answers 16

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
jquery-ui
twitter-bootstrap
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

Not the answer you're looking for? Browse other questions tagged javascriptjqueryjquery-uitwitter-bootstrap or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
jquery-ui
twitter-bootstrap
or ask your own question.