jQuery Twitter 引导程序：模态淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8146996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap: modal fade
提问by Robin
I have a problem with the twitter bootstrap modal...
我的推特引导模式有问题...
It works fine when I don't have the .fadeclass on my element. As soon as I add it, the modal does not show up.
当.fade我的元素上没有类时，它工作正常。一旦我添加它，模态就不会出现。
I tracked down the problem to this line, I think:
我将问题追溯到这一行，我认为：
doAnimate ?
this.$backdrop.one(transitionEnd, callback) :
callback()
doAnimateis webkitTransitionEnd, it looks fine.
But I think transitionEndis never fired, because I try to log something in the callback, and it never gets logged.
doAnimate是webkitTransitionEnd，看起来不错。但我认为transitionEnd永远不会被解雇，因为我试图在回调中记录一些东西，但它永远不会被记录。
Any ideas?
有任何想法吗？
EDIT: some code
编辑：一些代码
The link:
链接：
<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, doesn't when I add it)
模态（在没有淡入淡出类的情况下工作，当我添加它时不会）
<div id="event-modal" class="modal hide fade"></div>
The css:
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%;
}
Am I missing something?
我错过了什么吗？
采纳答案by Christian
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 http://jsfiddle.net/sfWBT/880/
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:
编辑以提供更新的链接，因为以前的 jsFiddle 不起作用，我无法再添加 jsFiddle 没有代码。所以这里的代码也是：
html:
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:
js：
$(function() {
$('#event-modal').modal({
backdrop: true
});
});
回答by asleepysamurai
I had the same problem. I was trying to use bootstrap in an existing project and since many of the classnames clashed with my own class names, I had recompiled bootstrap.css with a .tbs namespace. In the modal window plugin, the backdrop element is added to document.body. Since the modal backdrop was not in my .tbs namespace the css fade selector was not applied. Thus the transition never occurred and hence the callback function was never fired. I fixed this by modifying
我有同样的问题。我试图在现有项目中使用 bootstrap，由于许多类名与我自己的类名发生冲突，我重新编译了 bootstrap.css 与 .tbs 命名空间。在模态窗口插件中，背景元素被添加到 document.body 中。由于模式背景不在我的 .tbs 命名空间中，因此未应用 css 淡入淡出选择器。因此转换从未发生，因此回调函数从未被触发。我通过修改解决了这个问题
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo(document.body)
to
到
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo($('.tbs')[0])
回答by Welshy
I had the same issue as I only wanted to use parts of the twitter bootstrap framework.
我遇到了同样的问题，因为我只想使用 twitter bootstrap 框架的一部分。
It is CSS styles that are missing in your case Robin. For the modals to work correctly you need to include the rules from 'component-animations.less' file.
在您的案例 Robin 中缺少 CSS 样式。为了使模态正常工作，您需要包含来自“component-animations.less”文件的规则。
this will allow the modals to work with the '.fade' class added to them.
这将允许模态与添加到它们的 '.fade' 类一起使用。
回答by Richard
try the following jquery in one of your js files, you will need a 'close' classed element inside you modal/alert
在您的 js 文件之一中尝试以下 jquery，您将需要一个“关闭”类元素在您的模态/警报中
for alert boxes
用于警报框
$(".alert .close").click( function() {
$(this).parent().addClass("fade");
});
or for modals (may differ depending on your element nesting)
或用于模态（可能因元素嵌套而异）
$(".modal .modal-header .close").click( function() {
$(this).parent().parent().addClass("fade");
});
回答by Alejandro García Iglesias
You must use the plugin that brings the modal behavior, it's a jQuery plugin from Twitter. For reference to that script: http://twitter.github.com/bootstrap/javascript.html#modal
您必须使用带来模态行为的插件，它是来自 Twitter 的 jQuery 插件。参考该脚本：http: //twitter.github.com/bootstrap/javascript.html#modal
Also make sure you're using the right piece of HTML (it's not shown in the page). From that link's source code:
还要确保您使用的是正确的 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>
Note that the "in" class that @ChristianVarga suggests is added automatically by the modal plugin. You must only initialize the plugin, as pointed in the documentation.
请注意，@ChristianVarga 建议的“in”类是由模态插件自动添加的。您只能按照文档中的说明初始化插件。
回答by Scott Stafford
The issue for me was same as @sleepysamurai, that I had namespaced my bootstrap file and this breaks the modals. I fixed it by changing the .css though, rather than the .js, since it was already "customized". Specifically (for Bootstrap 2.3.2, namespaced into bootstrap-container):
我的问题与@sleepysamurai 相同，我为引导文件命名了名称空间，这破坏了模态。我通过更改 .css 而不是 .js 来修复它，因为它已经“定制”了。具体来说（对于 Bootstrap 2.3.2，命名空间为bootstrap-container）：
- Search/replace all
.bootstrap-container .modal-and replace with.modal-. - Search/replace all
.bootstrap-container .fadeand replace with.fade.
- 搜索/替换全部
.bootstrap-container .modal-并替换为.modal-。 - 搜索/替换全部
.bootstrap-container .fade并替换为.fade。
In other words, un-namespacing the modal and fade rules fixed the issue.
换句话说，取消模态和淡入淡出规则的命名空间解决了这个问题。
