Bootstrap 3.0.0模式事件未启动

Question

使用Bootstrap 3，我似乎根本无法使模式事件正常工作。我想在模态关闭时执行一个操作，但什么也没发生。

这是我的精简HTML：

<button type="button" data-toggle="modal" data-target="#imageUpload">Launch modal</button>
<div class="modal fade" id="imageUpload" tabindex="-1">
<div class="modal-dialog">
    <div class="modal-content">
        Upload form here
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

和我的JS:

$(function(){
    $('#imageUpload').modal({
        show: false
    });
    $('#imageUpload').on('hidden', function () {
        window.alert('hidden event fired!');
    });
});

我在这里组装了一个JSfiddle-http://jsfiddle.net/EcnC3/1/

我没有发现任何其他模态事件在Bootstrap 3中不起作用的报告，所以我确信我做错了什么，但无法解决。感谢您为提供的任何帮助

Answer 1

从模态中删除.fade类。这对我很有效。

Answer 2

根据文档，事件名称类似于shown.bs.modal:

$('#imageUpload').on('shown.bs.modal', function () {
   alert('show event fired!');
});

看看这个FIDDLE

Answer 3

删除模态元素上的fade类即可修复。

https://github.com/twbs/bootstrap/issues/11793

参见@Fint答案

Answer 4

模式对话框的Bootstrap.min.css文件中似乎有一个错误。我把它改为Bootstrap.css，对话框现在可见了。

Answer 5

被标记为正确的答案只是这样，但这是对"我做过的愚蠢的事情"的大量列表的补充——还要小心你针对的是哪个DOM元素。它应该是外部模态分区

例如，如果您使用RequireJS和Knockout amd helper这样的模板管理器，您可能会有这样的标记

父标记：

<div class="modal fade" id="addThingModal" tabindex="-1" role="dialog" aria-labelledby="addThingModalLabel" aria-hidden="true">
    <div data-bind="module: { name: 'addThing'}"></div>
</div>

模板：

<div id="addThingTemplate" class="modal-dialog">
   ...
</div>

脚本的目标应该是"#addThingModal"，而不是"#addThingTemplate"