web-dev-qa-db-ja.com

Bootstrap 3.0.0モーダルイベントが発生しない

Bootstrap 3.を使用して、モーダルイベントがまったく機能していないようです。モーダルが閉じたときにアクションを実行したいのですが、何も起こりません。

これが私の取り除いた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 -->

そして私のJS：

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

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

ここにJSfiddleをまとめました- http://jsfiddle.net/EcnC3/1/

Bootstrap 3で動作しないモーダルイベントの他のレポートは見つかりませんでした。そのため、何か間違ったことをしたと思いますが、それを理解することはできません。助けてくれてありがとう提供することができます

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

documentation によると、イベント名はshown.bs.modal：

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

これを見てください[〜＃〜] fiddle [〜＃〜]

20
Artyom Neustroev

モーダルから.fadeクラスを削除します。これは私のために働いた。

33
Fint

モーダル要素のfadeクラスを削除すると、修正が行われます。

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

@Fintの回答を参照してください

6
marlo

正しいとマークされた答えはそれだけですが、「私が行ったことのないこと」の大規模なリストへの追加-ターゲットとするDOM要素にも注意してください。それは外側のモーダルDivである必要があります。

たとえば、RequireJSとKnockout-AMD-helperのようなテンプレートマネージャーを使用している場合、次のようなマークアップがある可能性があります。

親のマークアップ：

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

テンプレート：

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

スクリプトは「#addThingTemplate」ではなく「#addThingModal」をターゲットにする必要があります

0
Serexx

モーダルダイアログのBootstrap.min.cssファイルにバグがあるようです。これをBootstrap.cssに変更すると、ダイアログが表示されます。

0
Xdrone