Twitter bootstrap: modal fondu
J'ai un problème avec le twitter bootstrap modal...
Il fonctionne très bien lorsque je n'ai pas l' .fondu de classe sur mon élément. Dès que je l'ajoute, le modal ne se présente pas.
J'ai traqué le problème de cette ligne, je pense:
doAnimate ?
this.$backdrop.one(transitionEnd, callback) :
callback()
doAnimate
est webkitTransitionEnd
, il a l'air bien.
Mais je pense que transitionEnd
n'est jamais tiré, parce que j'essaie de me connecter quelque chose dans le rappel, et il n'est jamais connecté.
Des idées?
EDIT: un peu de code
Le lien:
<a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">I'm attending!<span class="ico join"></span></a>
Le modal (fonctionne sans le fondu de la classe, il ne marche pas quand je ajouter)
<div id="event-modal" class="modal hide fade"></div>
Le css:
.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-ms-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -25%;
}
Suis-je raté quelque chose?
Grâce.
A un lien de votre code? Le fondu code fonctionne sur le twitter bootstrap démo, donc un exemple de code où il n'est pas le travail de l'aide dans la résolution de la question.
- Je ajouter de la partie de mon code 🙂 Merci.
- Je ajouter de la partie de mon code 🙂 Merci.
OriginalL'auteur Robin | 2011-11-16
Vous devez vous connecter pour publier un commentaire.
Malgré qu'il soit accepté, les informations contenues dans cette réponse était incorrecte, donc j'ai enlevé la réponse originale, pour éviter la confusion. Voici un jsFiddle d'un travail de démonstration avec fade http://jsfiddle.net/sfWBT/880/
Édité mise à jour le lien sous précédentes jsFiddle ne fonctionnait pas, et je ne peux plus ajouter de jsFiddle sans code. Donc voici le code:
html:
js:
Tu veux dire quelque chose comme
.addClass('in').show();
?Oh oui, je vois que maintenant. Seriez-vous capable de créer un jsFiddle peut-être? J'ai créé un, basé sur certaines de vos données, et j'ai toujours été en mesure de le faire fonctionner: jsfiddle.net/sfWBT/1
Merci. Quelques règles css doit être manquant. Je ne veux pas l'ensemble de la css, et j'ai juste cueillis à la main les pièces qui m'intéressait. Je suppose que j'ai manqué quelques-uns.
Désolé, mais la classe n'aide pas, mais qu'il est fourni par bootstrap, Javascript lui-même.
OriginalL'auteur Christian Varga
J'ai eu le même problème. J'ai essayé d'utiliser bootstrap dans un projet existant et depuis de nombreux noms de classe se sont affrontés avec mes propres noms de classe, j'avais recompilé bootstrap.css avec un .le sct espace de noms. Dans la fenêtre modale du plugin, la toile de fond de l'élément est ajouté au document.corps. Depuis le modal toile de fond n'était pas dans mon .le sct espace de noms de la css fondu sélecteur n'a pas été appliquée. Ainsi, la transition n'a jamais eu lieu et donc la fonction de rappel n'a jamais été tiré. J'ai corrigé cela en modifiant
à
OriginalL'auteur asleepysamurai
J'ai eu le même problème que j'ai voulu seulement utilisent des parties de twitter bootstrap cadre.
Il est des styles CSS qui sont manquants dans votre cas Robin. Pour les auxiliaires modaux pour fonctionner correctement, vous devez inclure les règles de la composante " -animations.moins fichier.
cela permettra à la modaux de travailler avec le".fade " classe ajoutée.
OriginalL'auteur Welshy
essayez ce qui suit jquery dans un de vos fichiers js, vous aurez besoin d'une "fermer" classé élément à l'intérieur de vous modal/alerte
pour des boîtes d'alerte
ou pour les auxiliaires modaux (peut varier en fonction de votre élément de nidification)
OriginalL'auteur Richard
Vous devez utiliser le plugin qui apporte le comportement modal, c'est un plugin jQuery de Twitter. Pour la référence à ce script: http://twitter.github.com/bootstrap/javascript.html#modal
Aussi, assurez-vous d'utiliser le bon morceau de HTML (ce n'est pas indiqué dans la page). À partir de ce lien est le code source:
Noter que la classe "in" que @ChristianVarga suggère est ajouté automatiquement par le modal plugin. Vous ne devez initialiser le plugin, comme indiqué dans la documentation.
OriginalL'auteur Alejandro García Iglesias
Le problème pour moi était le même que @sleepysamurai, que j'ai eu des espaces de mon fichier de bootstrap et cela rompt avec les auxiliaires modaux. Je l'ai corrigé en modifiant le .css si, plutôt que de la .js, puisqu'elle a déjà été "sur-mesure". En particulier, par Bootstrap 2.3.2, des espaces dans
bootstrap-container
):.bootstrap-container .modal-
et de le remplacer avec.modal-
..bootstrap-container .fade
et de le remplacer avec.fade
.En d'autres termes, l'onu-namespacing le modal et le fondu des règles de la correction du problème.
OriginalL'auteur Scott Stafford