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
The Bootstrap modal component allows you to add a stylized dialog box to your website. Add a stylized dialog box to your website with the Bootstrap modal component.
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds . modal-open to the <body> to override default scrolling behavior and generates a . modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.
remove the .fade class from your modal. this worked for me.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With