Bootstrap modal: comment supprimer L'effet Slide down

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 de modals container 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 réglé pour s'effacer et .in , ce qui signifie qu'il va glisser. Il suffit donc de supprimer la classe liée à l'effet que vous souhaitez supprimer, qui dans votre cas est juste la classe .in .

Edit: Just j'ai effectué quelques tests et il semble que ce ne soit pas le cas, la classe .in est ajoutée par javascript, bien que vous puissiez modifier le comportement de he 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 que le modal s'efface plutôt que de glisser (pourquoi est-il appelé .fade de toute façon?) vous pouvez écraser la classe dans votre fichier CSS ou directement dans bootstrap.css avec 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 pas d'effet, supprimez simplement la classe fade 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 fix. Comme ma réponse précédente pour bootstrap 2, cela fera quand même un fondu d'opacité, mais ne fera pas la transition de glissement.

vous pouvez changer les modèles.moins ou le thème.fichiers css, selon votre flux de travail. Si vous n'avez pas passé du temps avec moins, je vous le recommande vivement.

pour moins, trouver 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 remplacer le -25% par 0%

alternativement, si vous utilisez seulement le css, trouvez 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 remplacer -25% par 0% .

j'ai résolu ce problème en annulant la valeur par défaut .modal.fade styles dans ma propre feuille de style moins:

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

cela maintient l'animation fade in / fade out mais supprime l'animation slide up / slide down.

Je n'ai pas aimé l'effet de glissement non plus. Pour corriger cela, tout ce que vous avez à faire est de rendre l'attribut top le même pour les deux .modal.fondu et modal.fondu.in. Vous pouvez enlever le top 0.3s ease-out dans les transitions aussi, mais ça ne fait pas de mal de le laisser dedans. j'aime cette approche parce que le fade in/out fonctionne, il tue juste le slide .

.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

j'ai trouvé la meilleure solution que supprime la diapositive mais laisse le fondu est en ajoutant le css suivant dans un fichier css de votre choosing qui est invoqué 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;
}

vous pouvez aussi écraser bootstrap.css tout simplement en enlevant le "top:-25%;"

une fois enlevé, le modal s'effacera sans l'animation de la diapositive.

il suffit de supprimer la classe fade et si vous voulez plus d'animations à effectuer sur le Modal, utilisez animate.classes css dans votre Modal.

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

j'annule le moins de code par défaut de Bootstrap avec ceci dans mon propre moins:

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

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

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

voulait mettre à jour ceci. La plupart d'entre vous n'ont pas terminé ce problème. J'utilise Bootstrap 3. aucune des corrections ci-dessus n'a fonctionné.

pour supprimer l'effet glissement, mais garder le fondu. Je suis allé dans bootstrap css et (noté sur 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 - en utilisant Bootstrap 3. Vous devez ajouter ce css après boostrap styles -

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

.modal.fade {
   transition: none; 
}

la question était claire: supprimer seulement la diapositive: Voici comment la changer dans Bootstrap v3

Dans les auxiliaires modaux.moins commenter la déclaration traduire:

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