it-swarm.com.de

Twitter Bootstrap modal: So entfernen Sie den Slide down-Effekt

Gibt es eine Möglichkeit, die Twitter Bootstrap Modal window animation von einem Slide-Down-Effekt zu einem FadeIn zu ändern oder einfach nur ohne das Slide anzuzeigen? Ich habe die Dokumentation hier gelesen:

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

Sie erwähnen jedoch keine Optionen zum Ändern der Modal-Body-Slide-Effekte.

159
ramz15

Nehmen Sie einfach die Klasse fade aus dem modalen div heraus.

Insbesondere ändern:

<div class="modal fade hide">

zu:

<div class="modal hide">

PDATE: Für bootstrap3 wird die Klasse hide nicht benötigt.

349
Rose Perrone

Die von bootstrap verwendeten Modals verwenden CSS3, um die Effekte bereitzustellen. Sie können entfernt werden, indem die entsprechenden Klassen aus dem Modals-Container div entfernt werden:

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

Wie Sie sehen können, hat dieses Modal eine Klasse von .fade, was bedeutet, dass es so eingestellt ist, dass es eingeblendet wird und.in, was bedeutet, dass es hineingleitet. Entfernen Sie also einfach die Klasse, die sich auf den Effekt bezieht, den Sie entfernen möchten. In Ihrem Fall ist dies nur die .in Klasse.

Bearbeiten: Nur ein paar Tests durchgeführt und es scheint, dass dies nicht der Fall ist, die .in Klasse wird durch Javascript hinzugefügt, obwohl Sie das slideDown-Verhalten mit CSS wie folgt ändern können:

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

Demo

36
Andres Ilich

Wenn Sie möchten, dass das Modal eingeblendet und nicht eingeblendet wird (warum heißt es überhaupt .fade?), Können Sie die Klasse in Ihrer CSS-Datei oder direkt in bootstrap.css Wie folgt überschreiben:

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

Wenn Sie keine Wirkung erzielen möchten, entfernen Sie einfach die Klasse fade aus den modalen Klassen.

30
lorem monkey

Ich glaube, dass die meisten dieser Antworten für bootstrap 2 sind. Ich bin auf dasselbe Problem für bootstrap 3 gestoßen und wollte mein Update teilen. Wie meine vorherige Antwort für bootstrap 2 wird immer noch eine Deckkraftüberblendung durchgeführt, aber NICHT der Folienübergang.

Sie können je nach Arbeitsablauf entweder die modals.less- oder die theme.css-Dateien ändern. Wenn Sie keine gute Zeit mit weniger verbracht haben, kann ich es nur empfehlen.

für weniger finden Sie den folgenden Code in MODALS.less

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

dann ändere das -25% bis 0%

Wenn Sie alternativ nur das CSS verwenden, finden Sie Folgendes in 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;
}

und ändern Sie dann die -25% bis 0%.

24
viggity

Ich habe dieses Problem gelöst, indem ich die Standardstile .modal.fade In meinem eigenen LESS-Stylesheet überschrieb:

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

Dadurch wird die Einblend-/Ausblendanimation beibehalten, die Animation zum Hoch-/Herunterrutschen jedoch entfernt.

18
Alex Bain

Ich habe die beste Lösung gefunden, die entfernt die Folie, verlässt aber die Überblendung darin besteht, das folgende CSS in eine von Ihnen gewählte CSS-Datei einzufügen, die nach der bootstrap.css aufgerufen wird

.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

Der Slide-Effekt hat mir auch nicht gefallen. Um dies zu beheben, müssen Sie lediglich das top -Attribut für .modal.fade und modal.fade.in gleich setzen. Sie können den top 0.3s ease-out Auch in den Übergängen entfernen, aber es tut nicht weh, ihn zu belassen. Ich mag diesen Ansatz, weil das Ein-/Ausblenden einfach funktioniert tötet die Folie .

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

Wenn Sie nach einer bootstrap 3 Antwort suchen, schauen Sie hier

11
viggity

sie können bootstrap.css auch überschreiben, indem Sie einfach "top: -25%;"

nach dem Entfernen wird das Modal ohne die Folienanimation ein- und ausgeblendet.

2
Amr Morsy

Entfernen Sie einfach die Fade-Klasse und wenn Sie mehr Animationen auf dem Modal ausführen möchten, verwenden Sie einfach die animate.css-Klassen in Ihrem Modal.

2
Kapil Kumar

schauen Sie sich http://quickrails.com/Twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/ an

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

Ich arbeite mit bootstrap 3 und dem modalen Durandal JS 2-Plug-in. Diese Frage wurde oben auf den Google-Ergebnissen gestellt Lösung für zukünftige Besucher.

Ich überschreibe den Standard-Code von Bootstrap mit diesem Code in meinem eigenen less:

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

Auf diese Weise bleibt mir nur der Fade-Effekt und kein SlideDown.

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

Die Frage war klar: entferne nur die Folie: Hier ist, wie man es in Bootstrap v3) ändert

Kommentieren Sie in modals.less die translate-Anweisung aus:

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

Das folgende CSS funktioniert für mich - Verwenden von Bootstrap 3. Sie müssen dieses CSS nach Boostrap-Stilen hinzufügen -

.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

Wollte dies aktualisieren. Die meisten von Ihnen haben diese Ausgabe noch nicht abgeschlossen. Ich verwende Bootstrap 3. Keine der oben genannten Korrekturen hat funktioniert.

um den Dia-Effekt zu entfernen, aber das Einblenden beizubehalten, habe ich bootstrap CSS und (die folgenden Selektoren notiert) - dies hat das Problem behoben.

 .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