Twitter Bootstrap modal: Cómo eliminar el efecto de deslizamiento hacia abajo

Los modales utilizados por el bootstrap utilizan CSS3 para suministrar los efectos y pueden eliminarse eliminando las clases apropiadas de modales container div:

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

Como puede ver, este modal tiene una clase de .fade, lo que significa que está configurado para desvanecerse y.in, lo que significa que se deslizará. Así que simplemente elimine la clase relacionada con el efecto que desea eliminar, que en su caso es solo la clase .in.

Editar: Acaba de ejecutar algunas pruebas y parece que ese no es el caso, la clase .in se añade por javascript, aunque se puede modificar el comportamiento slideDown con css de la siguiente manera:

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

Demo

Si te gusta que el modal se desvanezca en lugar de deslizarse (¿por qué se llama .fade de todos modos?) puede sobrescribir la clase en su archivo CSS o directamente en bootstrap.css con esto:

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

Si no desea ningún efecto, simplemente elimine la clase fade de las clases modales.

Creo que la mayoría de estas respuestas son para bootstrap 2. Me encontré con el mismo problema para bootstrap 3 y quería compartir mi corrección. Al igual que mi respuesta anterior para bootstrap 2, esto todavía hará un desvanecimiento de opacidad, pero NO hará la transición de diapositiva.

Puede cambiar los modales.menos o el tema.archivos CSS, dependiendo de su flujo de trabajo. Si no has pasado tiempo de calidad con menos, lo recomiendo encarecidamente.

Para menos, encuentre el siguiente código en MODALS.less

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

Luego cambia el -25% a 0%

Alternativamente, si estás usando solo el css, encuentra lo siguiente en 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;
}

Y luego cambiar el -25% a 0%.

Resolví esto anulando los estilos predeterminados .modal.fade en mi propia hoja de estilos LESS:

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

Esto mantiene la animación fade in / fade out pero elimina la animación slide up / slide down.

Tampoco me gustó el efecto de diapositiva. Para arreglar esto todo lo que tienes que hacer es hacer que el atributo top sea el mismo para ambos .modal.fade and modal.fade.in. También puedes quitar el top 0.3s ease-out en las transiciones, pero no hace daño dejarlo. Me gusta este enfoque porque el fade in/out funciona, simplemente mata la diapositiva.

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

Si estás buscando una respuesta bootstrap 3, mira aquí

He encontrado la mejor solución que elimina la diapositiva pero deja el fundido es agregando el siguiente css en un archivo css de su elección que se invoca después del 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;
}

También puede sobrescribir bootstrap.css simplemente eliminando "top: -25%;"

Una vez eliminado, el modal simplemente se desvanecerá dentro y fuera sin la animación de diapositiva.

Simplemente elimine la clase fade y si desea que se realicen más animaciones en el Modal solo use animate.clases css en tu Modal.

Estoy trabajando con bootstrap 3 y el complemento modal Durandal JS 2. Esta pregunta estaba en la parte superior de los resultados de Google y como ninguna de las respuestas anteriores está funcionando para mí, pensé en compartir mi solución para futuros visitantes.

Anulo el código Less de Bootstrap predeterminado con esto en mi propio less:

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

De esa manera me queda solo el efecto de desvanecimiento, y no slideDown.

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

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

Quería actualizar esto. La mayoría de ustedes no han completado este número. Estoy usando Bootstrap 3. ninguna de las correcciones anteriores funcionó.

Para eliminar el efecto de diapositiva pero mantener el fundido. Entré en bootstrap css y (señaló los siguientes selectores) - esto resolvió el problema.

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

El siguiente CSS funciona para mí - Usando Bootstrap 3. Es necesario añadir este css después de estilos boostrap -

.modal.fade .modal-dialog{
    -webkit-transition-property: transform; 
    -webkit-transition-duration:0 ; 
    transition-property: transform; 
    transition-duration:0 ; 
}

.modal.fade {
   transition: none; 
}

La pregunta era clara: eliminar solo la diapositiva: Aquí está cómo cambiarla en Bootstrap v3

En modales.menos comentar la instrucción translate:

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