Jquery 推特引导：模态衰减

我对twitter引导模式有问题

当我的元素上没有

.fade

类时，它可以正常工作。我一加上它，模态就不出现了

我将问题追溯到这一行，我认为：

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

doAnimate

是

webkittransionend

，看起来不错。 但是我认为，

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>

---

我遗漏了什么吗？

尽管被接受，但此答案中的信息不正确，因此我删除了原始回复以避免混淆。下面是一个使用fade的工作演示

经过编辑以提供更新的链接，因为以前的JSFIDLE不起作用，我无法再添加没有代码的JSFIDLE。下面是代码：

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>

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

---

您必须使用带来模态行为的插件，它是来自Twitter的jQuery插件。参考该脚本：

还要确保您使用的是正确的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”类是由模式插件自动添加的。您必须只初始化插件，正如文档中指出的那样。

我遇到了同样的问题，因为我只想使用twitter引导框架的一部分

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

---

这将允许模态与添加到它们中的“.fade”类一起工作。

在一个js文件中尝试以下jquery，模态/警报中需要一个“close”类元素

用于警报框

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

或用于情态动词（可能因元素嵌套而异）

---

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

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

this.$background=$（''）.appendTo（document.body）

到

this.$background=$（''）.appendTo（$（'.tbs'）[0]）

我的问题与@sleepysamurai相同，我将引导文件命名为命名空间，这打破了modals。我通过更改.css而不是.js来修复它，因为它已经“定制”了。具体而言（对于引导2.3.2，名称空间位于

引导容器中）

：

• 搜索/替换所有

  .bootstrap container.modal-

  并替换为

  .modal-

• 搜索/替换所有

  .bootstrap container.fade

  并替换为

  .fade

---

换句话说，取消命名模式和淡入淡出规则解决了这个问题。

javascript应该在单击按钮时添加.In类。哦，是的，我现在看到了。您是否能够创建一个JSFIDLE？我已经创建了一个，基于您的一些数据，我仍然能够让它工作：谢谢。必须缺少一些css规则。我不想要整个框架css，我只是手工挑选了我感兴趣的部分。我想我错过了一些。抱歉，但课堂上的内容没有帮助，而是由引导Javascript本身提供的。是的，编辑说明明确指出我提供的信息是错误的，但我留下了答案供参考。

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

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

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

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo($('.tbs')[0])