18

我似乎无法使用 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 中不起作用的模态事件的报告，所以我确定我做错了什么，但无法弄清楚。谢谢你的尽心帮助

4

5 回答 5

35

从您的模态中删除 .fade 类。这对我有用。

于 2013-12-03T20:48:40.490 回答
20

根据文档，事件名称如下shown.bs.modal：

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

看看这个FIDDLE

于 2013-09-02T08:29:43.500 回答
6

删除fade模态元素上的类进行修复。

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

见@Fint 答案

于 2015-04-20T09:05:45.513 回答
0

模式对话框的 Bootstrap.min.css 文件中似乎有一个错误。我将其更改为 Bootstrap.css，现在可以看到对话框。

于 2013-09-21T22:26:48.393 回答
0

标记为正确的答案就是这样，但是除了“我做过的愚蠢的事情”的大量列表之外 - 还要小心你的目标是哪个 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>

您的脚本应针对“#addThingModal”而不是“#addThingTemplate”

于 2016-03-25T18:00:33.160 回答