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 back 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 -->

and my JS:

$(function(){
    $('#imageUpload').modal({
        show: false
    });

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

I've put a JSfiddle together here - http://jsfiddle.net/EcnC3/1/

I've not found any other reports of modal events not working in Bootstrap 3 so I'm sure I've done something wrong, but can't figure it out. Thanks for any help you can offer

$(window).on('hidden.bs.modal', function (e) { – Ronnie Royston Aug 27 '15 at 05:44 — Ronnie Royston, Aug 27 '15 at 05:44

score 35 · Answer 1 · answered Dec 03 '13 at 20:48

35

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

answered Dec 03 '13 at 20:48

Fint

595
5
5

This worked for me, as did using 'show.bs.modal' instead of 'shown' – Josh Hunter Dec 08 '15 at 16:10
This worked for me as well. A possible hacky workaround is simply running your code in a setTimeout > 150ms (thats the length of the CSS3 animation for .fade) inside the show.bs.modal trigger. i.e `$('#imageUpload').on('show.bs.modal', function () { setTimeout(function(){ alert('modal is visible!'); }, 200); });` – Low May 05 '16 at 08:05
Nice find on the fade class. Hard to believe that hasn't been addressed yet. – Aerokneeus Oct 21 '16 at 20:06
are you kidding me??? why isn't this fixed! confirming that removing .fade from the .modal element fixes the issue when you register a .on(...) handler for a modal that is invoked with options (see OP) – Aaron Hudon Nov 15 '17 at 04:52

Artyom Neustroev · Accepted Answer · 2014-08-29T07:22:26.487

20

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

edited Aug 29 '14 at 07:22

answered Sep 02 '13 at 08:29

Artyom Neustroev

8,627
5
33
57

didn't realize I was looking at the 2.3.2 docs by mistake, thanks! – cscott530 Oct 31 '13 at 20:53

score 6 · Answer 3 · answered Apr 20 '15 at 09:05

6

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

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

see @Fint answer

answered Apr 20 '15 at 09:05

marlo

6,998
5
28
34

score 0 · Answer 4 · answered Sep 21 '13 at 22:26

0

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.

answered Sep 21 '13 at 22:26

Xdrone

781
1
11
21

score 0 · Answer 5 · answered Mar 25 '16 at 18:00

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'

Bootstrap 3.0.0 modal events not firing

5 Answers5

Linked