Twitter-Bootstrap: modales Überblenden

8

Ich habe ein Problem mit dem Twitter-Bootstrap-Modal ...

Es funktioniert gut, wenn ich die .fade-Klasse für mein Element nicht habe. Sobald ich es addiere, erscheint das Modal nicht.

Ich habe das Problem in dieser Zeile aufgespürt, denke ich:

%Vor%

doAnimate ist webkitTransitionEnd , es sieht gut aus. Aber ich denke, transitionEnd wird nie ausgelöst, weil ich versuche, etwas in den Callback zu schreiben, und es wird nie protokolliert.

Irgendwelche Ideen?

BEARBEITEN: etwas Code

Der Link:

%Vor%

Das Modal (funktioniert ohne die Fade-Klasse, nicht wenn ich es hinzufüge)

%Vor%

Die CSS:

%Vor%

Vermisse ich etwas?

Danke.

    
Robin 16.11.2011, 05:07
quelle

6 Antworten

7

Trotz der Annahme, dass die Informationen in dieser Antwort falsch waren, habe ich die ursprüngliche Antwort entfernt, um Verwirrung zu vermeiden. Hier ist ein jsFiddle einer funktionierenden Demo mit Ссылка

Bearbeitet, um einen aktualisierten Link zu liefern, da jsFiddle vorher nicht funktionierte und ich jsFiddle nicht mehr ohne Code hinzufügen kann. Also hier ist auch der Code:

html:

%Vor%

js:

%Vor%     
Christian Varga 17.11.2011, 04:24
quelle
5

Ich hatte das gleiche Problem. Ich habe versucht, Bootstrap in einem vorhandenen Projekt zu verwenden, und da viele der Klassennamen mit meinen eigenen Klassennamen kollidierten, hatte ich bootstrap.css mit einem TBS-Namespace neu kompiliert. Im modalen Fenster-Plugin wird das Hintergrundelement zu document.body hinzugefügt. Da sich der modale Hintergrund nicht in meinem .tbs-Namespace befand, wurde der CSS-Fade-Selektor nicht angewendet. Daher trat der Übergang nie auf und daher wurde die Callback-Funktion nie ausgelöst. Ich habe das behoben, indem ich

geändert habe %Vor%

bis

%Vor%     
asleepysamurai 12.10.2012 12:49
quelle
1

Ich hatte das gleiche Problem, da ich nur Teile des Twitter-Bootstrap-Frameworks verwenden wollte.

Es sind CSS-Stile, die in Ihrem Fall Robin fehlen. Damit die Modalitäten korrekt funktionieren, müssen Sie die Regeln aus der Datei 'component-animations.less' einfügen.

Damit können die Modale mit der hinzugefügten Klasse ".fade" arbeiten.

    
Welshy 16.05.2012 12:40
quelle
1

Versuchen Sie die folgende jquery in einer Ihrer js-Dateien, Sie benötigen ein 'close' klassifiziertes Element in Ihrem modal / alert

für Alarmfelder

%Vor%

oder für modals (kann je nach Elementverschachtelung abweichen)

%Vor%     
Richard 20.06.2012 01:47
quelle
0

Sie müssen das Plugin verwenden, das das modale Verhalten bringt, es ist ein jQuery-Plugin von Twitter. Als Referenz zu diesem Skript: Ссылка

Stellen Sie außerdem sicher, dass Sie das richtige Stück HTML verwenden (es wird nicht auf der Seite angezeigt). Aus dem Quellcode dieses Links:

%Vor%

Beachten Sie, dass die "in" -Klasse, die @ChristianVarga vorschlägt, automatisch vom modalen Plugin hinzugefügt wird. Sie müssen das Plugin nur initialisieren, wie in der Dokumentation angegeben.

    
Alejandro Iglesias 29.12.2011 22:14
quelle
0

Das Problem für mich war dasselbe wie @sleepysamurai, dass ich meine Bootstrap-Datei mit einem Namespace versehen hatte, was die Modalitäten unterbricht. Ich habe es behoben, indem ich die .css-Datei anstelle der .js geändert habe, da sie bereits "angepasst" war. Speziell (für Bootstrap 2.3.2, Namespaced in bootstrap-container ):

  • Suche / Ersetze alle .bootstrap-container .modal- und ersetze sie durch .modal- .
  • Suche / Ersetze alle .bootstrap-container .fade und ersetze sie durch .fade .

Mit anderen Worten: Durch Un-Namespacing der Modal- und Fade-Regeln wurde das Problem behoben.

    
Scott Stafford 05.12.2013 14:34
quelle