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

Gibt es eine Möglichkeit, die Animation des Twitter Bootstrap Modal-Fensters von einem Slide-Down-Effekt in einen FadeIn zu ändern oder nur ohne Slide anzuzeigen? Ich habe die Dokumentation hier gelesen:

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

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

Nehmen Sie einfach die fadeKlasse aus dem Modal Div.

Ändern Sie insbesondere:

<div class="modal fade hide">

zu:

<div class="modal hide">

UPDATE: Für bootstrap3 wird die hideKlasse nicht benötigt.

Die vom Bootstrap verwendeten Modalitäten verwenden CSS3, um die Effekte bereitzustellen, und sie können entfernt werden, indem die entsprechenden Klassen aus dem Modalcontainer 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 .indass es eingeblendet wird. Entfernen Sie also einfach die Klasse, die sich auf den Effekt bezieht, den Sie entfernen möchten, in Ihrem Fall nur die .inKlasse.

Bearbeiten: Habe gerade einige Tests ausgeführt und es scheint, dass dies nicht der Fall ist. Die .inKlasse 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

Wenn Sie möchten, dass das Modal eingeblendet wird, anstatt es einzufügen (warum wird es überhaupt aufgerufen .fade?), Können Sie die Klasse in Ihrer CSS-Datei überschreiben oder direkt bootstrap.cssdamit einfügen:

.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 keinen Effekt wünschen, entfernen Sie einfach die fadeKlasse aus den modalen Klassen.

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 meinen Fix teilen. Wie meine vorherige Antwort für Bootstrap 2 führt dies immer noch zu einer Überblendung der Deckkraft, jedoch NICHT zum Übergang der Folie.

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

Für weniger Geld 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 ändern Sie die -25%zu0%

Wenn Sie nur das CSS verwenden, finden Sie alternativ 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%zu 0%.

Ich habe dieses Problem gelöst, indem ich die Standardstile .modal.fadein meinem eigenen WENIGER Stylesheet überschrieben habe :

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

Dadurch bleibt die Animation zum Ein- und Ausblenden erhalten, die Animation zum Auf- und Abschieben wird jedoch entfernt.

Ich habe die beste Lösung gefunden, die die Folie entfernt, aber die Überblendung verlässt, indem Sie das folgende CSS in eine CSS-Datei Ihrer Wahl einfügen, die nach der Datei 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;
}

Der Slide-Effekt hat mir auch nicht gefallen. Um dies zu beheben, müssen Sie das topAttribut nur für .modal.fade und modal.fade.in gleich machen. Sie können top 0.3s ease-outdie Übergänge auch entfernen, aber es tut nicht weh, sie beizubehalten. Ich mag diesen Ansatz, weil das Ein- und Ausblenden funktioniert und nur die Folie zerstört wird .

.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 , klicken Sie hier

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

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

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

Ich arbeite mit Bootstrap 3 und dem modalen Durandal JS 2-Plugin. Diese Frage stand über den Google-Ergebnissen und da keine der oben genannten Antworten für mich funktioniert, dachte ich, ich würde meine Lösung für zukünftige Besucher freigeben.

Ich überschreibe den Less-Code des Standard-Bootstraps damit 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.

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

Die Frage war klar: Entfernen Sie nur die Folie: So ändern Sie sie in Bootstrap v3

In modals.less kommentieren Sie die translate-Anweisung aus:

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

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

Wollte dies aktualisieren. Die meisten von Ihnen haben dieses Problem noch nicht gelöst. Ich verwende Bootstrap 3. Keine der oben genannten Korrekturen hat funktioniert.

Um den Folieneffekt zu entfernen, aber das Einblenden beizubehalten. Ich ging in Bootstrap CSS und (beachten Sie die folgenden Selektoren) - dies löste das Problem.

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

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

Entfernen Sie einfach die 'Fade'-Klasse aus der Modal-Klasse

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

wie

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