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

【问题标题】：Twitter bootstrap: modal fadeTwitter 引导程序：模态淡入淡出
【发布时间】：2011-11-16 05:07:32
【问题描述】：

我对 twitter 引导模式有疑问...

当我的元素上没有 .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%;
}

我错过了什么吗？

【问题讨论】：

标签： jquery twitter-bootstrap dom-events

【解决方案1】：

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

编辑以提供更新的链接，因为以前的 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
  });
});

【讨论】：

.in 类应该是在您单击按钮时由 javascript 添加的。
哦，是的，我现在明白了。你能创建一个 jsFiddle 吗？我根据你的一些数据创建了一个，我仍然能够让它工作：jsfiddle.net/sfWBT/1
谢谢。必须缺少某些 CSS 规则。我不想要整个框架 css，我只是精心挑选了我感兴趣的部分。我想我错过了一些。
抱歉，in 类没有帮助，而是由引导 Javascript 本身提供的。
是的，编辑说明明确指出我提供的信息有误，但我留下了答案以供参考。

【解决方案2】：

我遇到了同样的问题。我试图在现有项目中使用引导程序，并且由于许多类名与我自己的类名发生冲突，因此我使用 .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])

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

在您的一个 js 文件中尝试以下 jquery，您将需要在模态/警报中使用“关闭”分类元素

用于警告框

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

或用于模态（可能因您的元素嵌套而异）

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

【讨论】：

【解决方案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”类是由模态插件自动添加的。您只能按照文档中的说明初始化插件。

【讨论】：

【解决方案6】：

我的问题与@sleepysamurai 相同，我已将引导文件命名为命名空间，这会破坏模式。我通过更改 .css 而不是 .js 来修复它，因为它已经“自定义”了。具体来说（对于 Bootstrap 2.3.2，命名空间为 bootstrap-container）：

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

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

【讨论】：