Ein Bootstrap 3 Modal ein- und ausblenden

8

Ich habe meinem Bootstrap 3 modal eine "Fade" -Klasse gegeben, aber das Modal "verblasst" nicht wie ich es erwarte. Es scheint von oben nach innen zu rutschen, anstatt einzublenden.

Modal:

%Vor%

Auslöseknopf:

%Vor%

Um ein Beispiel zu zeigen, wie ich einen "Fade" -Effekt erwarten würde, habe ich dieses Beispiel erstellt: Ссылка

Wie kann ich mein Modal dazu bringen, so ein- und auszublenden?

    
henrywright 21.05.2014, 19:08
quelle

3 Antworten

8

Bootstrap-Modale werden standardmäßig eingeblendet. Vielleicht verblasst es zu schnell für dich, um es zu sehen? Wenn Sie sich die CSS anschauen, können Sie sehen, dass sie Übergänge eingerichtet haben, damit sie für 0,15 Sekunden eingeblendet wird:

%Vor%

Wenn Sie die Einblendung zu Demonstrationszwecken auf eine Sekunde ändern, zeigt dies möglicherweise an, dass sie tatsächlich eingeblendet wird.

%Vor%     
david 21.05.2014, 19:45
quelle
8

Die Übergänge befinden sich im CSS und bewirken, dass das Modal animiert und nach unten rutscht. Wenn Sie LESS verwenden, können Sie diese Zeilen in modal.less modifizieren, um das gewünschte Verhalten zu erhalten, indem Sie die in den Mixins oder component-animations.less (oder Ihren eigenen) bereitgestellten Übergangsmixins verwenden:

%Vor%

Wenn Sie weder LESS noch den offiziellen Sass-Port verwenden, können Sie einfach das kaskadierende Verhalten von Stylesheets nutzen und Ihre Überschreibung zu einer benutzerdefinierten CSS-Datei hinzufügen, die nach der Datei bootstrap.css geladen wird.

%Vor%     
jme11 21.05.2014 19:47
quelle
0

Fiddle für Ihren Code: Ссылка

Sie beziehen sich auf die fadeOut -Methode von jQuery, was Bootstrap fade klasse nicht tut. Wenn Sie diesen Effekt erzielen müssen, verlassen Sie sich nicht auf BS-Bibliotheken und verwenden Sie jQuery.

    
punund 21.05.2014 19:40
quelle