Twitter Bootstrap modal: How to remove Slide down effect

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.

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

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.