web-dev-qa-db-fra.com

Twitter Bootstrap modal: comment faire pour supprimer l'effet Glisser-descendre

Existe-t-il un moyen de changer l’effet Twitter Bootstrap _ de la fenêtre modale d’un glissement vers le bas à un fadeIn ou tout simplement de l’afficher sans glisser? J'ai lu la documentation ici:

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

Mais ils ne mentionnent aucune option pour changer les effets de glissement du corps modal.

javascriptjqueryjquery-uitwitter-bootstrap
159
ramz15

Il suffit de sortir la classe fade du modal div.

Plus précisément, changez:

<div class="modal fade hide">

à:

<div class="modal hide">

PDATE: Pour bootstrap3, la classe hide n'est pas nécessaire.

349
Rose Perrone

Les modaux utilisés par le bootstrap utilisent CSS3 pour fournir les effets. 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 constater, ce modal a une classe de .fade, ce qui signifie qu'il est configuré pour se fondre en fondu et.in, ce qui signifie qu'il va glisser. Donc, supprimez simplement la classe liée à l'effet que dans votre cas, il n’ya que la classe .in.

Edit: Je viens de faire quelques tests et il apparaît que ce n’est pas le cas, la classe .in est ajoutée par javascript, bien que vous puissiez modifier le comportement de slideDown avec css comme suit:

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

démo

36
Andres Ilich

Si vous préférez avoir le fondu modal plutôt que le glisser (pourquoi il s'appelle de toute façon .fade?), 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 aucun effet, supprimez simplement la classe fade des classes modales.

30
lorem monkey

Je pense que la plupart de ces réponses concernent bootstrap 2. Je rencontrais le même problème pour bootstrap 3 et souhaitais partager mon correctif. Comme ma réponse précédente pour bootstrap 2, cela continuera à atténuer l'opacité, mais PAS fera la transition entre les diapositives.

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

pour moins, 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% en 0%

Si vous utilisez uniquement le fichier css, vous pouvez également trouver 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%.

24
viggity

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

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

Cela conserve l'animation d'ouverture/fermeture en fondu, mais supprime l'animation glisser vers le haut/bas.

18
Alex Bain

J'ai trouvé la meilleure solution qui supprime la diapositive mais laisse le fondu est en ajoutant les fichiers css suivants 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;
}
11
justinazz

Je n'ai pas aimé l'effet de diapositive non plus. Pour résoudre ce problème, il vous suffit de rendre l'attribut top identique pour les deux fichiers .modal.fade et modal.fade.in. Vous pouvez aussi enlever le top 0.3s ease-out dans les transitions, mais cela ne fait pas de mal de le laisser dedans. J'aime cette approche parce que le fade in/out fonctionne, ça tue 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

11
viggity

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

une fois retiré, le modal apparaîtra et disparaîtra sans animation de diapositive.

2
Amr Morsy

Supprimez simplement la classe de fondu et si vous souhaitez que davantage d'animations soient effectuées sur le modal, utilisez simplement les classes animate.css de votre modal.

2
Kapil Kumar

regarde 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;
}
1
Konstantin XFlash Stratigenas

Je travaille avec bootstrap 3 et le plugin modal Durandal JS 2. Cette question figurait en tête 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 par défaut de Bootstrap par 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 plus que l’effet de fondu et pas de slide-down.

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

La question était claire: remove only la diapositive: Voici comment le changer dans Bootstrap v3

Dans modals.less, commentez la déclaration de traduction:

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

Le code 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; 
}
0
Ignacio Vazquez

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 de diapositive tout en conservant le fondu entrant. Je suis entré dans 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)*/}
0
timothymarois