Twitter Bootstrap modal: Comment supprimer l'effet Slide down

Existe-t-il un moyen de changer l'animation de la fenêtre Twitter Bootstrap Modal d'un effet de diapositive vers le bas en un fondu ou simplement de l'afficher sans la diapositive? J'ai lu la documentation ici:

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

Mais ils ne mentionnent aucune option pour modifier les effets de diapositive modale du corps.

Sortez simplement la fadeclasse de la div modale.

Plus précisément, changez:

<div class="modal fade hide">

à:

<div class="modal hide">

MISE À JOUR: Pour bootstrap3, la hideclasse n'est pas nécessaire.

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

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

Comme vous pouvez le voir, ce modal a une classe de .fade, ce qui signifie qu'il est configuré pour se fondre et .in, ce qui signifie qu'il va glisser. Donc, supprimez simplement la classe liée à l'effet que vous souhaitez supprimer, qui dans votre cas n'est que la .inclasse.

Edit: Juste exécuté quelques tests et il semble que ce n'est pas le cas, la .inclasse est ajoutée par javascript, bien que vous puissiez modifier le comportement de slideDown avec css comme ceci:

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

Démo

Si vous aimez avoir le fondu modal plutôt que glisser (pourquoi est-il appelé de .fadetoute façon?), Vous pouvez écraser la classe dans votre fichier CSS ou directement bootstrap.cssavec ceci:

.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 aucun effet, supprimez simplement la fadeclasse des classes modales.

Je crois que la plupart de ces réponses sont pour bootstrap 2. J'ai rencontré le même problème pour bootstrap 3 et je voulais partager mon correctif. Comme ma réponse précédente pour bootstrap 2, cela fera toujours un fondu d'opacité, mais ne fera PAS la transition de diapositive.

Vous pouvez modifier les fichiers modals.less ou theme.css, en fonction de votre flux de travail. Si vous n'avez pas passé de temps de qualité avec moins, je le recommande vivement.

pour moins cher, trouvez le code suivant dans MODALS.less

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

puis changez le -25%en0%

Sinon, si vous utilisez uniquement le css, recherchez ce qui suit dans 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;
}

puis changez le -25%en 0%.

J'ai résolu ce problème en remplaçant les .modal.fadestyles par défaut 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 de fondu entrant / sortant, mais supprime l'animation de glissement vers le haut / vers le bas.

J'ai trouvé la meilleure solution qui supprime la diapositive mais laisse le fondu est d'ajouter le css suivant dans un fichier css de votre choix qui est appelé après le 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;
}

Je n'aimais pas non plus l'effet slide. Pour résoudre ce problème, tout ce que vous avez à faire est de rendre l' topattribut the le même pour .modal.fade et modal.fade.in. Vous pouvez également enlever top 0.3s ease-outles transitions, mais cela ne fait pas de mal de le laisser dedans. J'aime cette approche parce que le fondu entrant / sortant fonctionne, il 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 recherchez une réponse bootstrap 3, regardez ici

vous pouvez également écraser bootstrap.css en supprimant simplement "top: -25%;"

une fois supprimé, le modal disparaîtra simplement sans l'animation de la diapositive.

Supprimez simplement la classe de fondu et si vous voulez que plus d'animations soient effectuées sur le Modal, utilisez simplement les classes animate.css dans votre Modal.

Je travaille avec bootstrap 3 et le plugin modal Durandal JS 2. Cette question était en plus des résultats de Google et comme aucune des réponses ci-dessus ne fonctionne pour moi, j'ai pensé partager ma solution pour les futurs visiteurs.

Je remplace le code Less de Bootstrap par défaut avec ceci dans mon propre less:

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

De cette façon, il ne me reste que l'effet de fondu et pas de slideDown.

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

La question était claire: ne supprimez que la diapositive: voici comment la modifier dans Bootstrap v3

Dans modals.less, commentez l'instruction translate:

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

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

Je voulais mettre à jour cela. La plupart d'entre vous n'ont pas terminé ce problème. J'utilise Bootstrap 3. aucun des correctifs ci-dessus n'a fonctionné.

pour supprimer l'effet de diapositive mais garder le fondu. Je suis entré dans le bootstrap css et (noté les sélecteurs suivants) - cela a résolu le problème.

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

Le CSS suivant fonctionne pour moi - Utilisation de Bootstrap 3. Vous devez ajouter ce css après les styles boostrap -

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

.modal.fade {
   transition: none; 
}

supprimez simplement la classe 'fade' de la classe modale

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

comme

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