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

¿Hay alguna manera de cambiar la animación de la ventana modal de Bootstrap de Twitter de un efecto de deslizamiento hacia abajo a un desvanecimiento o simplemente mostrar sin la diapositiva? Leí la documentación aquí:

http://getbootstrap.com/javascript/#modals

Pero no mencionan ninguna opción para cambiar los efectos de deslizamiento corporal modal.

Solo saca la fadeclase del div modal.

Específicamente, cambie:

<div class="modal fade hide">

a:

<div class="modal hide">

ACTUALIZACIÓN: Para bootstrap3, la hideclase no es necesaria.

Los modales utilizados por el bootstrap usan CSS3 para proporcionar los efectos y pueden eliminarse eliminando las clases apropiadas de modals 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á hacia adentro. Tan solo elimine la clase relacionada con el efecto que desea eliminar, que en su caso es solo la .inclase.

Editar: solo ejecuté algunas pruebas y parece que ese no es el caso, la .inclase se agrega mediante javascript, aunque puede modificar el comportamiento de slideDown con css de la siguiente manera:

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

Manifestación

Si desea tener el desvanecimiento modal en lugar de deslizarse (¿por qué se llama de .fadetodos modos?), Puede sobrescribir la clase en su archivo CSS o directamente bootstrap.csscon 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 fadeclase 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 solució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 archivos modals.less o theme.css, según su flujo de trabajo. Si no ha pasado ningún tiempo de calidad con menos, lo recomiendo encarecidamente.

por 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 cambie el -25%a0%

Alternativamente, si está utilizando solo el CSS, encuentre 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 cambia el -25%a 0%.

Resolví esto anulando los .modal.fadeestilos predeterminados en mi propia hoja de estilos MENOS:

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

Esto mantiene la animación de aparición / desaparición gradual, pero elimina la animación de desplazamiento hacia arriba / hacia abajo.

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

Tampoco me gustó el efecto de diapositiva. Para solucionar esto, todo lo que tiene que hacer es hacer que el topatributo sea el mismo para .modal.fade y modal.fade.in. También puede quitar top 0.3s ease-outlas transiciones, pero no está de más dejarlo. Me gusta este enfoque porque el fundido de entrada / salida 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í

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

una vez eliminado, el modal simplemente desaparecerá sin la animación de la diapositiva.

Simplemente elimine la clase de desvanecimiento y si desea que se realicen más animaciones en el Modal, simplemente use las clases animate.css en su Modal.

Estoy trabajando con Bootstrap 3 y el complemento modal Durandal JS 2. Esta pregunta estaba sobre los resultados de Google y como ninguna de las respuestas anteriores funciona para mí, pensé en compartir mi solución para futuros visitantes.

Anulo el código predeterminado de Bootstrap Less 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 solo me queda 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;
}

La pregunta era clara: elimine solo la diapositiva: a continuación se explica cómo cambiarla en Bootstrap v3

En modals.less comenta la declaración de traducción:

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

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 ha completado este problema. Estoy usando Bootstrap 3. ninguna de las correcciones anteriores funcionó.

para eliminar el efecto de diapositiva pero mantener el desvanecimiento. Entré en bootstrap css y (noté 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í: uso de Bootstrap 3. Debe agregar este CSS después de los estilos boostrap:

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

.modal.fade {
   transition: none; 
}

simplemente elimine la clase 'fade' de la clase modal

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

como

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