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

Respuestas:

359

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.

— Rose Perrone
fuente
9
Aunque el OP sí preguntó cómo hacer que se desvanezca, por lo que algunas de esas respuestas son correctas para la formación alternativa de la pregunta. Supongo que es solo una mala pregunta porque en realidad son 2 preguntas en una y nadie ha respondido ambas preguntas en una sola respuesta.
— umassthrower 01 de
1
No tiene que modificar las fuentes de arranque. Solo tienes que modificar tu html. Esta es la respuesta correcta.
— mpccolorado
31
@umassthrower es correcto. Solo se responde cómo no tener transición. La respuesta no cubre la cuestión de cómo desvanecerse pero no desplegarse desde la parte superior.
— Synesso
26
No entiendo cómo esta es la respuesta correcta ... hace que el modal aparezca sin desvanecimiento, y OP ha pedido eliminar el SLIDE, pero no el FADE ...
— Shawn Taylor
2
Estoy esperando mantener el desvanecimiento y eliminar la diapositiva también, y esta respuesta no es útil. Es extraño que bootstrap usara su clase de desvanecimiento para manejar también el efecto de deslizamiento para el modal ya que el desvanecimiento está completamente separado en su CSS.
— Leeish
36

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

— Andres Ilich
fuente
2
También debe agregarlo al fondo: modal.fade, .modal-backdrop.fadeetc ...
— David Hellsing
probablemente sea mejor editar el archivo componente-animaciones.less, por la razón que David menciona.
— Peter Hanley
la clase de desvanecimiento es opcional, hay una respuesta mejor (y preferida según la documentación de BS) de Rose a continuación
— umassthrower
@umassthrower esta respuesta es bastante antigua, al momento de escribir esa opción no existía.
— Andres Ilich
No estoy seguro de que el comentario sea correcto, ya que BS 2.0 se lanzó 3 meses antes de esa respuesta y eliminé el desvanecimiento de mis modales cuando utilicé v2.0 el verano pasado. Quizás no cambiaron la documentación hasta después de eso. No sé.
— umassthrower 01 de
30

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.

— mono lorem
fuente
1
La parte superior: 50% parece estar causando problemas cuando se cierra el diálogo. El diálogo parece abrirse en el mismo lugar que antes; pero justo antes de cerrar, por una fracción de segundo se mueve al centro y luego se cierra. Al menos en cromo. ¿Alguien más ha notado esto también?
— mohitp
1
@lorem monkey - aplausos, quería el desvanecimiento pero no la diapositiva. Si alguien quiere la versión scss / compass ... .modal.fade {@include transición (opacidad .2s lineal, ninguna);}
— Simon
1
@mohitp En lugar de "top: 50%", estoy usando "top: 25%". También agregué .modal.fade.in {top: 25%; } Parece haber hecho el truco para mí. No estoy seguro de por qué esto funciona ya que no tengo la clase "in" en mi modal.
— Darren
2
@dkrape la inclase es agregada por Bootstrap.js
— Dave Sag el
Esta es la respuesta correcta, respondiendo ambas partes de la pregunta.
— mate
26

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

— viggity
fuente
2
Anularía estos estilos en una hoja de estilo personalizada en lugar de editar la hoja de estilo de Bootstrap / Less.
— Bassem
Esta es la ÚNICA solución CSS simple para obtener FADE sin diapositivas. Gracias.
— davideghz
18

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.

— Alex Bain
fuente
gracias. Terminé usando 10% en lugar de 50%, y reduje la transición de .3s a .25s, lo que me parece un poco más suave.
— isapir
Abrir y cerrar un modal varias veces lo mueve hacia arriba en la página con el tiempo.
— Leeish
12

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;
}
— justinazz
fuente
1
Esta es la mejor respuesta para Bootstrap 3 para mantener el desvanecimiento pero quitar la diapositiva hacia abajo
— NickH
2
Esta solución también funciona bien para Bootstrap 4. ¡Gracias!
— aprovent
11

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í

— viggity
fuente
1
Los dos ejemplos anteriores que no son MENOS anteriores descuidan la declaración ".modal.fade.in", que hace que el modal salte un poco al cerrarse. Este funciona muy bien. Aquí está en la práctica: jsfiddle.net/dkrape/4EwFq
— Darren
Esto funciona principalmente, pero veo aparecer una línea horizontal azul brillante (en todos los Safari, Firefox y Chrome) a unos 32 píxeles por encima de mi Modal cuando aparece.
— Dave Sag
2

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

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

— Amr Morsy
fuente
2

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.

— Kapil Kumar
fuente
1

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.

— David
fuente
1 
.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
— SM Adnan
fuente
Eso eliminará la animación de mostrar y ocultar. Funciona bien para mí con Angular-Bootstrap ui también.
— SM Adnan
1

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%);
— Derry Birkett
fuente
0

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)*/}
— tmarois
fuente
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; 
}
— Ignacio Vázquez
fuente
0

simplemente elimine la clase 'fade' de la clase modal

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

como

class="modal bs-example-modal-lg"
— Abeysinghe
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.