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.
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%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%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.
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.
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
):
.bootstrap-container .modal-
und ersetze sie durch .modal-
. .bootstrap-container .fade
und ersetze sie durch .fade
. Mit anderen Worten: Durch Un-Namespacing der Modal- und Fade-Regeln wurde das Problem behoben.
Tags und Links jquery javascript-events twitter-bootstrap