Twitter bootstrap：模态淡化

问题描述

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

I have a problem with the twitter bootstrap modal...

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

It works fine when I don't have the .fade class on my element. As soon as I add it, the modal does not show up.

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

I tracked down the problem to this line, I think:

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

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

doAnimate is webkitTransitionEnd, it looks fine.But I think transitionEnd is never fired, because I try to log something in the callback, and it never gets logged.

任何想法？

编辑：一些代码

链接：

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

模态（不使用淡入淡出类，但在添加时不起作用）

The modal (works without the fade class, doesnt when I add it)

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

我错过了什么？

谢谢。

推荐答案

尽管被接受，但信息仍然存在这个答案是不正确的，因此我删除了原来的答案，以防止混淆。这是一个关于淡入淡出的工作演示的jsFiddle

Despite it being accepted, the info in this answer was incorrect, therefore I have removed the original response to prevent confusion. Here's a jsFiddle of a working demo with fade http://jsfiddle.net/sfWBT/880/

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

Edited to provide updated link as previous jsFiddle wasn't working, and I can no longer add jsFiddle without code. So here's the code as well:

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

这篇关于Twitter bootstrap：模态淡化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！