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

Antworten:

359

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.

— Rose Perrone
quelle
9
Obwohl das OP gefragt hat, wie es eingeblendet werden soll, sind einige dieser Antworten für die alternative Bildung der Frage richtig. Ich denke, es ist nur eine schlechte Frage, weil es wirklich 2 Fragen in einer sind und niemand beide Fragen in einer Antwort beantwortet hat.
— umassthrower
1
Sie müssen die Bootstrap-Quellen nicht ändern. Sie müssen nur Ihr HTML ändern. Dies ist die richtige Antwort.
— mpccolorado
31
@umassthrower ist korrekt. Nur wie man keinen Übergang hat, wird beantwortet. Die Frage, wie man verblasst, aber nicht von oben herunterfällt, wird in dieser Antwort nicht behandelt.
— Synesso
26
Ich verstehe nicht, wie dies die richtige Antwort ist ... es lässt das Modal ohne Überblendung einblenden, und OP hat darum gebeten, das SLIDE zu entfernen, aber nicht das FADE ...
— Shawn Taylor
2
Ich warte darauf, die Überblendung beizubehalten und auch die Folie zu entfernen, und diese Antwort ist nicht hilfreich. Es ist seltsam, dass Bootstrap ihre Fade-Klasse verwendet hat, um auch den Slide-Effekt für das Modal zu handhaben, da das Fade in seinem CSS völlig separat ist.
— Leeish
36

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

— Andres Ilich
quelle
2
Sie sollten es auch zum Hintergrund hinzufügen: modal.fade, .modal-backdrop.fadeetc ...
— David Hellsing
Es ist wahrscheinlich besser, die Datei component-animations.less zu bearbeiten, aus dem Grund, den David erwähnt.
— Peter Hanley
Die Fade-Klasse ist optional, es gibt eine bessere (und gemäß BS-Dokumentation bevorzugte) Antwort von Rose unten
— umassthrower
@umassthrower diese Antwort ist ziemlich alt, zum Zeitpunkt des Schreibens gab es diese Wahl nicht.
— Andres Ilich
Ich bin mir nicht sicher, ob der Kommentar korrekt ist, da BS 2.0 3 Monate vor dieser Antwort veröffentlicht wurde und ich bei Verwendung von v2.0 im letzten Sommer Fade aus meinen Modals entfernt habe. Vielleicht haben sie die Dokumentation erst danach geändert. Keine Ahnung.
— umassthrower
30

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.

— Loremaffe
quelle
1
Das Top-50% scheint Probleme zu verursachen , wenn das Dialogfeld geschlossen. Der Dialog scheint sich an derselben Stelle wie zuvor zu öffnen. aber kurz vor dem Schließen bewegt es sich für den Bruchteil einer Sekunde in die Mitte und schließt dann. Zumindest in Chrome. Hat das noch jemand bemerkt?
— Mohitp
1
@lorem Affe - Prost, wollte das Ausbleichen, aber nicht die Folie. Wenn jemand die scss / kompass-Version will ... .modal.fade {@include Transition (Deckkraft .2s linear, keine);}
— Simon
1
@mohitp Anstelle von "top: 50%" verwende ich "top: 25%". Ich habe auch .modal.fade.in hinzugefügt {top: 25%; } Scheint den Trick für mich getan zu haben. Ich bin mir nicht sicher, warum dies funktioniert, da ich die "in" -Klasse in meinem Modal nicht habe.
— Darren
2
@dkrape die inKlasse wird von Bootstrap.js hinzugefügt
— Dave Sag
Dies ist die richtige Antwort, um beide Teile der Frage zu beantworten.
— Matt
26

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

— Viggity
quelle
2
Ich würde diese Stile in einem benutzerdefinierten Stylesheet überschreiben, anstatt das Stylesheet / Less von Bootstrap zu bearbeiten.
— Bassem
Dies ist die EINZIGE einfache CSS-Lösung, um FADE ohne Folie zu erhalten. Vielen Dank.
— Davidghz
18

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.

— Alex Bain
quelle
Danke. Am Ende habe ich 10% statt 50% verwendet und den Übergang von 0,3 auf 0,25 Sekunden reduziert, was mir etwas flüssiger erscheint.
— Isapir
Durch mehrmaliges Öffnen und Schließen eines Modals wird es im Laufe der Zeit auf der Seite nach oben verschoben.
— Leeish
12

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;
}
— Justinazz
quelle
1
Dies ist die beste Antwort für Bootstrap 3, um die Überblendung
— beizubehalten,
2
Diese Lösung funktioniert auch für Bootstrap 4. Vielen Dank!
— aprovent
11

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

— Viggity
quelle
1
Die beiden oben genannten Beispiele ohne WENIGER vernachlässigen die Deklaration ".modal.fade.in", wodurch das Modal beim Schließen ein wenig herumspringt. Dieser funktioniert großartig. Hier ist es in der Praxis: jsfiddle.net/dkrape/4EwFq
— Darren
Dies funktioniert meistens, aber ich sehe eine hellblaue horizontale Linie (in Safari, Firefox und Chrome) etwa 32 Pixel über meinem Modal, wenn sie angezeigt wird.
— Dave Sag
2

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.

— Amr Morsy
quelle
2

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.

— Kapil Kumar
quelle
1

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.

— David
quelle
1 
.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
— SM Adnan
quelle
Dadurch werden Animationen nicht mehr angezeigt und ausgeblendet. Funktioniert auch gut mit Angular-Bootstrap ui.
— SM Adnan
1

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

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

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

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

wie

class="modal bs-example-modal-lg"
— Abeysinghe
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.