Bootstrap 3.0.0 modal events not firing

Question

I can\'t seem to get modal events working at all using Bootstrap 3. I want to perform an action when my modal closes, but nothing\'s happening.

Here\'s my stripped

Answer 1

There seems to be a bug in the Bootstrap.min.css file for the modal dialog. I changed it to Bootstrap.css and the dialog is now visible.

Answer 2

The answer marked correct is just that, but an addition to the massive list of 'Dumb things I have done' - also be careful which DOM Element you target. It should be the outer modal Div.

For example if you are using RequireJS and a template manager like Knockout-amd-helper you might have markup like this

Parent markup:

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

Template:

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

your script should target '#addThingModal' not '#addThingTemplate'

Answer 3

According to documentation the event name is like shown.bs.modal:

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

Have a look at this FIDDLE

Answer 4

remove the .fade class from your modal. this worked for me.

Answer 5

removing the fade class on the modal element do the fix.

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

see @Fint answer