Website-Suche

javascript - Twitter Bootstrap Modal: Wie man den Slide-Down-Effekt entfernt

Gibt es eine Möglichkeit, die Animationsweise des Twitter Bootstrap Modal-Fensters von einem Heruntergleiten-Effekt zu einem FadeIn zu ändern oder einfach ohne das Gleiten anzuzeigen? Ich habe die Dokumentation hier durchgelesen:

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

Aber sie erwähnen keine Optionen zum Ändern der Folieneffekte des Modal-Körpers.

Antwort #1

Nehmen Sie einfach die fade-Klasse aus dem Modal-Div heraus.

Insbesondere ändern:

<div class="modal fade hide">

zu :

<div class="modal hide">

AKTUALISIERUNG: Für Bootstrap3 wird die hide-Klasse nicht benötigt.

Antwort #2

Die von Bootstrap verwendeten Modals nutzen CSS3, um die Effekte bereitzustellen, und sie können entfernt werden, indem die entsprechenden Klassen aus dem Container-Div des Modals entfernt werden:

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

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

Bearbeiten: Habe gerade einige Tests durchgeführt und es scheint, dass dies nicht der Fall ist, die .in-Klasse wird von JavaScript hinzugefügt, obwohl man das SlideDown-Verhalten mit CSS wie folgt ändern kann:

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

Demo

Antwort #3

Wenn Sie möchten, dass das Modal einblendet statt hereinzuschieben (warum wird es überhaupt .fade genannt?), können Sie die Klasse in Ihrer CSS-Datei oder direkt in bootstrap.css damit ü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 wünschen, entfernen Sie einfach die fade-Klasse aus den Modal-Klassen.

Antwort #4

Ich glaube, dass die meisten dieser Antworten für Bootstrap 2 sind. Ich bin auf dasselbe Problem bei Bootstrap 3 gestoßen und wollte meine Lösung teilen. Wie meine vorherige Antwort für Bootstrap 2 wird dies immer noch eine Opazitäts-Überblendung durchführen, aber die Folienübergang NICHT ausführen.

Sie können entweder die Dateien modals.less oder theme.css ändern, je nach Ihrem Arbeitsablauf. Wenn Sie noch keine gute Zeit mit Less verbracht haben, würde ich es sehr 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 ändern Sie das -25% zu 0%

Alternativ, wenn Sie 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 ändere dann das -25% zu 0%.

Antwort #5

Ich habe dies gelöst, indem ich die Standard-.modal.fade-Stile in meinem eigenen LESS-Stylesheet überschrieben habe:

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

Dies behält die Ein-/Ausblende-Animation bei, entfernt jedoch die Hoch-/Runterrutschen-Animation.

Antwort #6

Ich habe die beste Lösung gefunden, die die Folie entfernt, aber das Ausblenden beibehält, indem man das folgende CSS in einer CSS-Datei hinzufügt, die nach der bootstrap.css eingebunden 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;
}

Antwort #7

Mir hat der Slide-Effekt auch nicht gefallen. Um das zu beheben, müssen Sie nur das top-Attribut für sowohl .modal.fade als auch modal.fade.in gleich machen. Sie können auch das top 0.3s ease-out in den Übergängen entfernen, aber es schadet nicht, es drin zu lassen. Mir gefällt dieser Ansatz, weil das Ein-/Ausblenden funktioniert, es aber den Slide-Effekt eliminiert.

.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

Verwandte Artikel