jquery - modal - bootstrap min css

Bootstrap 3.0.0 modales eventos no disparando

Question

Parece que no puedo hacer que los eventos modales funcionen en absoluto usando Bootstrap 3. Quiero realizar una acción cuando se cierra mi modal, pero no sucede nada.

Aquí está mi HTML despojado:

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

y mi JS:

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

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

He puesto un JSfiddle juntos aquí: http://jsfiddle.net/EcnC3/1/

No he encontrado ningún otro informe de eventos modales que no funcionen en Bootstrap 3, así que estoy seguro de que hice algo mal, pero no puedo resolverlo. Gracias por cualquier ayuda que pueda ofrecer

Answer 1

La respuesta marcada como correcta es solo eso, pero una adición a la lista masiva de ''Cosas tontas que he hecho'' - también ten cuidado con el elemento DOM al que apuntas. Debe ser la div modal exterior.

Por ejemplo, si está utilizando RequireJS y un administrador de plantillas como Knockout-amd-helper, es posible que tenga un marcado como este

Marca de los padres:

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

Modelo:

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

su script debe apuntar a ''#addThingModal'' no ''#addThingTemplate''

Answer 2

Parece que hay un error en el archivo Bootstrap.min.css para el diálogo modal. Lo cambié a Bootstrap.css y el diálogo ahora está visible.

Answer 3

Según la documentation el nombre del evento es como se shown.bs.modal :

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

Echa un vistazo a este FIDDLE

Answer 4

elimina la clase .fade de tu modal. esto funciono para mi

Answer 5

eliminando la clase fade en el elemento modal haga la corrección.

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

ver respuesta @Fint