Question

我的twitter bootstrap模式有问题...

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

我认为这个问题跟踪到了这一行，我想：

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

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

有什么想法吗？

编辑：一些代码

链接：

<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>

模态（在没有淡入淡出的情况下工作，在我添加它时不起作用）

<div id="event-modal" class="modal hide fade"></div>

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

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

的工作演示的jsFiddle

编辑提供更新的链接，因为之前的jsFiddle无法正常工作，我无法再添加没有代码的jsFiddle。所以这里也是代码：

<强> HTML：

<div id="event-modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" href="#">x</a>
        <h3>Modal Heading</h3>
      </div>
      <div class="modal-body">
        <p>Some information</p>
      </div>
      <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
      </div>
    </div>
  </div>
</div>

<强> JS：

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

Answer 2

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

来解决这个问题

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo(document.body)

到

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').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（它未在页面中显示）。从该链接的源代码：

<div class="modal hide fade" id="modal-from-dom">
    <div class="modal-header">
        <a class="close" href="#">×</a>
        <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
    </div>
</div>

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

Answer 6

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

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

换句话说，取消命名模态和淡入淡出规则可以解决问题。

Twitter bootstrap：模态淡化

6 个答案: