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

根据documentation，事件名称类似于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元素。它应该是外模式Div。

例如，如果你使用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>

您的脚本应定位＆＃39; #addThingModal＆＃39;不是＃addThingTemplate＆＃39;

Bootstrap 3.0.0模态事件未触发

5 个答案: