Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3.0.0 modal events not firing

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

like image 896
gingerchris Avatar asked Sep 02 '13 08:09

gingerchris


People also ask

Does bootstrap 3 have modals?

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.

What is modal plugin used for in Bootstrap?

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.

How do I close a bootstrap modal?

Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.


2 Answers

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

like image 153
Fint Avatar answered Oct 23 '22 00:10

Fint


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

like image 20
Artyom Neustroev Avatar answered Oct 23 '22 01:10

Artyom Neustroev