Bootstrap 3.0.0 modal events not firing
31,829
Solution 1
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
Solution 2
remove the .fade class from your modal. this worked for me.
Solution 3
removing the fade
class on the modal element do the fix.
https://github.com/twbs/bootstrap/issues/11793
see @Fint answer
Related videos on Youtube
Author by
gingerchris
Updated on July 09, 2022Comments
-
gingerchris almost 2 years
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
-
Ronnie Royston over 8 years$(window).on('hidden.bs.modal', function (e) {
-
-
cscott530 over 10 yearsdidn't realize I was looking at the 2.3.2 docs by mistake, thanks!
-
Josh Hunter over 8 yearsThis worked for me, as did using 'show.bs.modal' instead of 'shown'
-
Low about 8 yearsThis 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); });
-
Aerokneeus over 7 yearsNice find on the fade class. Hard to believe that hasn't been addressed yet.
-
Aaron Hudon over 6 yearsare 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)