Bootstrap 3.0.0 модальные события не срабатывают

Я не могу заставить модальные события работать вообще с помощью 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, поэтому я уверен, что сделал что-то неправильно, но не могу понять. Спасибо за любую помощь, которую вы можете предложить

Ответ 1

В соответствии с документация название события похоже на shown.bs.modal:

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

Посмотрите на это FIDDLE

Ответ 2

удалите класс .fade из вашего модального. это сработало для меня.

Ответ 3

удаление класса fade в модальном элементе выполняется с исправлением.

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

см. @Fint answer

Ответ 4

Кажется, что ошибка в файле Bootstrap.min.css для модального диалога. Я изменил его на Bootstrap.css, и теперь диалог будет виден.

Ответ 5

Ответ, помеченный правильно, - это просто, но дополнение к массивному списку "Тупых вещей, которые я сделал" - также будьте осторожны, какой DOM Element вы нацеливаете. Это должно быть внешнее модальное 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>

ваш script должен указывать '#addThingModal' не '#addThingTemplate'