Twitter Bootstrap modal: Comment supprimer l'effet Slide down

Réponses:

359

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.

— Rose Perrone
source
9
Bien que le PO ait demandé comment le faire disparaître, certaines de ces réponses sont correctes pour la formation alternative de la question. Je suppose que c'est juste une mauvaise question parce que c'est vraiment 2 questions en une et que personne n'a répondu aux deux questions en une seule réponse.
— umassthrower
1
Vous n'avez pas à modifier les sources d'amorçage. Il vous suffit de modifier votre html. C'est la bonne réponse.
— mpccolorado
31
@umassthrower a raison. On ne répond qu'à la façon de ne pas avoir de transition. La question de savoir comment se faner mais pas dérouler du haut n'est pas couverte par cette réponse.
— Synesso
26
Je ne comprends pas comment c'est la bonne réponse ... cela fait apparaître le modal sans fondu, et OP a demandé de supprimer le SLIDE, mais pas le FADE ...
— Shawn Taylor
2
J'attends de garder le fondu et de supprimer également la diapositive et cette réponse n'est pas utile. C'est étrange que le bootstrap ait utilisé leur classe de fondu pour gérer également l'effet de diapositive pour le modal car le fondu est entièrement distinct dans leur CSS.
— Leeish
36

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

— Andres Ilich
source
2
Vous devriez également l'ajouter à la toile de fond: modal.fade, .modal-backdrop.fadeetc ...
— David Hellsing
il est probablement préférable d'éditer le fichier component-animations.less, pour la raison que David mentionne.
— Peter Hanley
la classe de fondu est facultative, il y a une meilleure réponse (et préférée par la documentation BS) de Rose ci
— umassthrower
@umassthrower cette réponse est assez ancienne, au moment de la rédaction de cet article, ce choix n'existait pas.
— Andres Ilich
Je ne suis pas sûr que ce commentaire soit correct car BS 2.0 a été publié 3 mois avant cette réponse et j'ai supprimé le fade de mes modaux lors de l'utilisation de la v2.0 l'été dernier. Peut-être qu'ils n'ont changé la documentation qu'après cela. Je sais pas.
— umassthrower
30

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.

— singe lorem
source
1
Le haut: 50% semble causer des problèmes lorsque la boîte de dialogue se ferme. Le dialogue semble s'ouvrir au même endroit qu'avant; mais juste avant de fermer, pendant une fraction de seconde, il se déplace vers le centre puis se ferme. Au moins dans Chrome. Est-ce que quelqu'un d'autre a remarqué cela aussi?
— mohitp
1
@lorem monkey - acclamations, voulait le fondu mais pas la diapositive. Si quelqu'un veut la version scss / compass ... .modal.fade {@include transition (opacity .2s linear, none);}
— Simon
1
@mohitp Au lieu de "top: 50%", j'utilise "top: 25%". J'ai également ajouté .modal.fade.in {top: 25%; } Semble avoir fait l'affaire pour moi. Je ne sais pas pourquoi cela fonctionne car je n'ai pas la classe "in" dans mon modal.
— Darren
2
@dkrape la inclasse est ajoutée par Bootstrap.js
— Dave Sag
C'est la bonne réponse, répondant aux deux parties de la question.
— mat
26

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

— vigueur
source
2
Je remplacerais ces styles dans une feuille de style personnalisée au lieu de modifier la feuille de style Bootstrap / Less.
— Bassem
c'est la SEULE solution CSS simple pour obtenir FADE sans diapositive. THX.
— davideghz
18

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.

— Alex Bain
source
Merci. J'ai fini par utiliser 10% au lieu de 50% et j'ai réduit la transition de .3s à .25s, ce qui me semble un peu plus fluide.
— isapir
L'ouverture et la fermeture d'un modal plusieurs fois le déplace vers le haut de la page au fil du temps.
— Leeish
12

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;
}
— justinazz
source
1
C'est la meilleure réponse pour Bootstrap 3 afin de garder le fondu mais de supprimer la glissière vers le bas
— NickH
2
Cette solution fonctionne bien pour Bootstrap 4 également. Merci!
— 6h23
11

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

— vigueur
source
1
Les deux premiers exemples non LESS ci-dessus négligent la déclaration ".modal.fade.in", ce qui fait sauter un peu le modal à la fermeture. Celui-ci fonctionne très bien. Le voici en pratique: jsfiddle.net/dkrape/4EwFq
— Darren
Cela fonctionne principalement, mais je vois une ligne horizontale bleu vif apparaître (dans tout Safari, Firefox et Chrome) à environ 32 pixels au-dessus de mon Modal quand il apparaît.
— Dave Sag
2

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.

— Amr Morsy
source
2

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.

— Kapil Kumar
source
1

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.

— David
source
1 
.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
— SM Adnan
source
Cela supprimera l'animation de l'affichage et du masquage. Fonctionne bien pour moi avec l'interface utilisateur Angular-Bootstrap également.
— SM Adnan du
1

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

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)*/}
— Tmarois
source
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; 
}
— Ignacio Vazquez
source
0

supprimez simplement la classe 'fade' de la classe modale

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

comme

class="modal bs-example-modal-lg"
— Abeysinghe
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.