Bootstrap 3.0.0 modale Ereignisse nicht feuern

Question

Ich kann nicht scheinen, modale Ereignisse überhaupt mit Bootstrap 3 zu arbeiten. Ich möchte eine Aktion ausführen, wenn mein Modal schließt, aber nichts passiert.

Hier ist meine abisoliert 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 --> 

und meine JS:

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

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

ich JSfiddle hier zusammen gestellt haben - http://jsfiddle.net/EcnC3/1/

Ich habe nicht Ich habe andere Berichte über modale Ereignisse gefunden, die in Bootstrap 3 nicht funktionieren, also bin ich sicher, dass ich s gemacht habe etwas falsch, aber kann es nicht herausfinden. Vielen Dank für jede Hilfe, die Sie

Answer 1

Nach documentation der Ereignisname ist wie shown.bs.modal anbieten:

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

Werfen Sie einen Blick auf diese FIDDLE

Answer 2

Es scheint ein Fehler in der Bootstrap zu sein. min.css Datei für den modalen Dialog. Ich habe es in Bootstrap.css geändert und der Dialog ist jetzt sichtbar.

Answer 3

Entfernen Sie die Fade-Klasse aus Ihrem Modal. das funktionierte für mich.

Answer 4

Entfernen Sie die fade Klasse auf dem modalen Element die Korrektur durchführen.

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

siehe @Fint Antwort

Answer 5

Die Antwort richtig markiert ist genau das, sondern eine Ergänzung zu der massiven Liste der ‚Dumb Dinge, die ich getan habe‘ - auch vorsichtig sein, die DOM-Element Sie zielen. Es sollte die äußere modale Div sein.

Zum Beispiel, wenn Sie RequireJS und ein Template-Manager wie Knockout-amd-Helfer verwenden könnten Sie Markup wie diese

Eltern Markup haben:

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

Vorlage:

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

Ihr Skript sollte auf "#addThingModal" und nicht auf "#addThingTemplate" zielen