Twitter引导程序：模态淡入淡出

我有一个twitter bootstrap模式的问题…

当我的元素上没有.fade类时，它工作正常。 一旦我添加它，模态就不会显示出来。

我想到了这个问题，我想：

doAnimate ? this.$backdrop.one(transitionEnd, callback) : callback() 

doAnimate是webkitTransitionEnd ，它看起来很好。 但我认为transitionEnd永远不会被触发，因为我尝试在回调中记录某些内容，并且它永远不会被记录。

有任何想法吗？

---

编辑：一些代码

链接：

 I'm attending! 

模态（没有淡入淡出类，在我添加时不起作用）

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%; } 

我错过了什么吗？

---

谢谢。

Answer 1

尽管它被接受了，但这个答案中的信息是不正确的，因此我删除了原来的回复以防止混淆。 这是一个jsFiddle的工作演示与淡入淡出http://jsfiddle.net/sfWBT/880/

编辑提供更新的链接，因为以前的jsFiddle不起作用，我不能再添加没有代码的jsFiddle。 所以这里的代码也是：

HTML：

 
 
 
 
 x 
Modal Heading
 
 
 
Some information
 
 
 Primary Secondary 
 
 
  

JS：

 $(function() { $('#event-modal').modal({ backdrop: true }); }); 

Answer 2

我有同样的问题。 我试图在现有项目中使用bootstrap，并且因为许多类名与我自己的类名冲突，所以我用.tbs命名空间重新编译了bootstrap.css。 在模态窗口插件中，背景元素被添加到document.body中。 由于模态背景不在我的.tbs命名空间中，因此未应用css淡入淡出选择器。 因此，从未发生过渡，因此回调函数从未被触发。 我修改了这个

 this.$backdrop = $('
').appendTo(document.body) 

至

 this.$backdrop = $('
').appendTo($('.tbs')[0]) 

Answer 3

我有同样的问题，因为我只想使用twitter bootstrap框架的一部分。

在您的案例Robin中缺少CSS样式。 要使模式正常工作，您需要包含“component-animations.less”文件中的规则。

这将允许模态与添加到它们的’.fade’类一起使用。

Answer 4

在你的一个js文件中尝试以下jquery，你需要一个’close’分类元素你的模态/警告

用于警报框

 $(".alert .close").click( function() { $(this).parent().addClass("fade"); }); 

或模态（可能因元素嵌套而异）

 $(".modal .modal-header .close").click( function() { $(this).parent().parent().addClass("fade"); }); 

Answer 5

你必须使用带来模态行为的插件，它是来自Twitter的jQuery插件。 有关该脚本的参考： http ： //twitter.github.com/bootstrap/javascript.html#modal

还要确保使用正确的HTML（它未在页面中显示）。 从该链接的源代码：

 
 
 × 
Modal Heading
 
 
 
One fine body…
 
 
 Primary Secondary 
  

请注意，@ christianVarga建议的“in”类是由modal插件自动添加的。 您必须只初始化插件，如文档中所指出的那样。

Answer 6

对我来说问题和@sleepysamurai一样，我已经命名了我的引导程序文件，这打破了模态。 我通过更改.css来修复它，而不是.js，因为它已经“自定义”了。 具体来说（对于Bootstrap 2.3.2，命名为bootstrap-container ）：

• 搜索/替换所有.bootstrap-container .modal-并替换为.modal- 。
• 搜索/替换所有.bootstrap-container .fade并替换为.fade 。

换句话说，取消命名模式和淡入淡出规则修复了问题。