javascript - not - open modal jquery

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

Question

¿Hay alguna manera de cambiar la animación de la ventana de Twitter Bootstrap Modal desde un efecto de deslizamiento hacia abajo a un fadeIn o simplemente visualizar 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 del cuerpo modal.

Answer 1

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 aún hará un fundido de opacidad, pero NO hará la transición de diapositiva.

Puede cambiar los archivos modals.less o theme.css, dependiendo de su flujo de trabajo. Si no has pasado 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 cambia el -25% a 0%

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

Answer 2

El siguiente CSS funciona para mí: usar Bootstrap 3. Necesita agregar este CSS después de los estilos de boostrap.

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

.modal.fade {
   transition: none; 
}

Answer 3

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 me funciona, pensé que compartiría mi solución para los futuros visitantes.

Sobreescribo el código menos predeterminado de Bootstrap con esto en mi cuenta menor:

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

De esa forma, me queda solo el efecto de fundido y no slideDown.

Answer 4

He encontrado que la mejor solución que elimina la diapositiva pero deja el desvanecimiento es mediante la adición de la siguiente CSS en un archivo CSS de tu 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;
}

Answer 5

La pregunta era clara: elimine solo la diapositiva: Aquí se muestra cómo cambiarla en Bootstrap v3

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

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

Answer 6

Lo resolví anulando los estilos predeterminados .modal.fade en mi propia hoja de estilo LESS:

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

Esto mantiene la animación de fundido de entrada / salida pero elimina la animación de deslizar hacia arriba / deslizar hacia abajo.

Answer 7

Los modales usados ​​por el programa de arranque usan CSS3 para proporcionar los efectos y se pueden eliminar eliminando las clases apropiadas del conte de contenedor de modales:

<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 .fade y .in , lo que significa que se deslizará hacia adentro. Por lo tanto, 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 agrega mediante javascript, aunque puede modificar el comportamiento de slideDown con css así:

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

Demo

Answer 8

No me gustó el efecto de deslizamiento tampoco. Para solucionar esto, todo lo que tiene que hacer es hacer que el atributo top el mismo tanto para .modal.fade como para modal.fade.in. También puedes quitar el top 0.3s ease-out en las transiciones, pero no está de más que lo dejes. 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 de bootstrap 3, mira aquí

Answer 9

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 deslizamiento pero mantener el fundido de entrada. Entré en bootstrap css y (observé 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)*/}

Answer 10

Si desea tener el fundido modal en lugar de deslizarse (¿por qué se llama .fade 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 quiere ningún efecto simplemente elimine la clase de fade de las clases modales.

Answer 11

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

Answer 12

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

una vez eliminado, el modal simplemente se desvanecerá sin la animación de diapositivas.

Answer 13

Solo saca la clase fade de la div modal.

Específicamente, cambio:

<div class="modal fade hide">

a:

<div class="modal hide">

ACTUALIZACIÓN: para bootstrap3, la clase hide no es necesaria.

Answer 14

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