9

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

我错过了什么吗？

4

6 回答 6

7

尽管已被接受，但此答案中的信息不正确，因此我删除了原始回复以防止混淆。这是一个带有淡入淡出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
  });
});
于 2011-11-17T04:24:56.447 回答
5

我有同样的问题。我试图在现有项目中使用 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])
于 2012-10-12T12:49:42.810 回答
1

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

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

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

于 2012-05-16T12:40:27.403 回答
1

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

用于警报框

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

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

$(".modal .modal-header .close").click( function() {
   $(this).parent().parent().addClass("fade");
});
于 2012-06-20T01:47:48.607 回答
0

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

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

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

于 2013-12-05T14:34:55.523 回答
0

您必须使用带来模态行为的插件，它是来自 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…&lt;/p>
    </div>
    <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
    </div>
</div>

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

于 2011-12-29T22:14:37.300 回答