webentwicklung-frage-antwort-db.com.de

Bootstrap 3.0.0 modale Ereignisse werden nicht ausgelöst

Ich kann anscheinend keine modalen Ereignisse mit Bootstrap 3 zum Laufen bringen. Ich möchte eine Aktion ausführen, wenn mein modaler Modus geschlossen wird, aber es passiert nichts.

Hier ist mein zurückgesetzter HTML-Code:

<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 habe hier ein JSfiddle zusammengestellt - http://jsfiddle.net/EcnC3/1/

Ich habe keine anderen Berichte über modale Ereignisse gefunden, die in Bootstrap 3 nicht funktionieren. Daher bin ich sicher, dass ich etwas falsch gemacht habe, es aber nicht verstehen kann. Vielen Dank für jede Hilfe, die Sie anbieten können

18
gingerchris

Gemäß Dokumentation ist der Ereignisname wie shown.bs.modal:

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

Schauen Sie sich diese GEIGE an

20

entfernen Sie die .fade-Klasse aus Ihrem Modal. das hat für mich funktioniert.

33
Fint

entfernen Sie die fade-Klasse des Modalelements, um den Fehler zu beheben.

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

siehe @Fint-Antwort

6
marlo

Die Antwort ist richtig, aber es ist nur eine Ergänzung zu der massiven Liste der "Dummes, die ich getan habe" - seien Sie auch vorsichtig, auf welches DOM-Element Sie abzielen. Es sollte die äußere modale Div sein. 

Wenn Sie beispielsweise RequireJS und einen Vorlagenmanager wie Knockout-AMD-Helper verwenden, haben Sie möglicherweise ein solches Markup 

Übergeordnetes Markup:

<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 "#addThingTemplate" abzielen.

0
Serexx

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

0
Xdrone