web-dev-qa-db-fra.com

Les événements modaux Bootstrap 3.0.0 ne se déclenchent pas

Il me semble que Bootstrap 3 ne fonctionne pas du tout avec les événements modaux. Je souhaite effectuer une action lorsque mon modal se ferme, mais rien ne se passe.

Voici mon HTML épuré:

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

et mon JS:

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

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

J'ai mis un JSfiddle ensemble ici - http://jsfiddle.net/EcnC3/1/

Je n'ai pas trouvé d'autres rapports d'événements modaux ne fonctionnant pas dans Bootstrap 3, alors je suis sûr d'avoir fait quelque chose de mal, mais je n'arrive pas à le comprendre. Merci pour toute aide que vous pouvez offrir

jquerymodal-dialogtwitter-bootstrap-3bootstrap-modal
18
gingerchris

Selon documentation le nom de l'événement est comme shown.bs.modal:

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

Regardez ce VIOLON

20
Artyom Neustroev

supprimez la classe .fade de votre modal. cela a fonctionné pour moi.

33
Fint

supprimer la classe fade sur l'élément modal corrige le problème.

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

voir @Fint answer

6
marlo

La réponse indiquée comme étant correcte est juste cela, mais un ajout à la liste massive de "choses stupides que j'ai faites" - faites également attention à l'élément DOM que vous ciblez. Ce devrait être la division modale extérieure. 

Par exemple, si vous utilisez RequireJS et un gestionnaire de modèle tel que Knockout-AMD-helper, vous pouvez avoir un balisage comme celui-ci. 

Balisage parent:

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

Modèle:

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

votre script doit cibler '#addThingModal' et non '#addThingTemplate'

0
Serexx

Il semble y avoir un bogue dans le fichier Bootstrap.min.css pour la boîte de dialogue modale. Je l'ai changé en Bootstrap.css et la boîte de dialogue est maintenant visible.

0
Xdrone