Modale Twitter Bootstrap : Comment supprimer l'effet de glissement vers le bas ?

Question

Existe-t-il un moyen de modifier l'animation de la fenêtre modale de Twitter Bootstrap en la faisant passer d'un effet de glissement à un effet de fondu ou en l'affichant simplement sans glissement ? J'ai lu la documentation ici :

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

Mais ils ne mentionnent aucune option permettant de modifier les effets de glissement du corps modal.

Answer 1

Enlevez juste le fade de la div modale.

Plus précisément, le changement :

<div class="modal fade hide">

à :

<div class="modal hide">

---

UPDATE : Pour bootstrap3, le hide n'est pas nécessaire.

Answer 2

Les modales utilisées par le bootstrap utilisent CSS3 pour fournir les effets et ils peuvent être supprimés en éliminant les classes appropriées du div conteneur des modales :

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

Comme vous pouvez le voir, cette modale a une classe de .fade ce qui signifie qu'il est réglé pour s'intégrer dans le paysage et .in ce qui signifie qu'il se glissera à l'intérieur. Il suffit donc de supprimer la classe liée à l'effet que vous souhaitez supprimer, ce qui dans votre cas est juste le .in classe.

Edit : Je viens d'effectuer quelques tests et il apparaît que ce n'est pas le cas, les .in est ajoutée par javascript, bien que vous puissiez modifier le comportement du slideDown avec css comme suit :

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

Démo

Answer 3

Si vous préférez que la modale s'ouvre en fondu plutôt qu'en glissant (pourquoi est-elle appelée .fade ) vous pouvez écraser la classe dans votre fichier CSS ou directement dans bootstrap.css avec ça :

.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 vous ne voulez pas d'effet, il suffit d'enlever l'option fade des classes modales.

Answer 4

J'ai résolu ce problème en remplaçant la valeur par défaut de la fonction .modal.fade dans ma propre feuille de style LESS :

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

Cela permet de conserver l'animation du fondu en entrée et en sortie mais de supprimer l'animation du glissement vers le haut et vers le bas.

Answer 5

Je n'ai pas aimé non plus l'effet de glissement. Pour remédier à cela, il suffit de faire en sorte que l'option top est le même pour .modal.fade et modal.fade.in. Vous pouvez retirer l'attribut top 0.3s ease-out dans les transitions aussi, mais ça ne fait pas de mal de le laisser. J'aime cette approche parce que le fondu en entrée/sortie fonctionne, ça tue juste la diapositive. .

.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 vous cherchez une réponse à bootstrap 3, regardez ici