2013-02-12 13 views
13

私はコードモーダル持つ:モーダルウィンドウを閉じた後でイベントを追加するにはどうすればよいですか?

<-- Button to trigger modal --> 
<div id="result"></div> 
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<-- Modal --> 
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

を、私は近いmoalウィンドウの後になってなければならないコードがあります。

$('#result').html('yes,result'); 

をモーダルウィンドウを閉じるときに(近いまたは非表示)ことを確認する方法を私にしてください知らせます2番目のコードを実行しましたか?

+0

ここでは何を使用していますか? jquery ui ?? – bipen

+0

bootstrap.js 詳細http://bootstrap-ru.com/javascript.php#modals –

+0

http://stackoverflow.com/questions/171928/hook-into-dialog-close-event –

答えて

17

回答が見つかりました。おかげで、すべての正しい答えが、次の:

$("#myModal").on("hidden", function() { 
    $('#result').html('yes,result'); 
}); 
ここ

イベントhttp://bootstrap-ru.com/javascript.php#modals

UPD

ブートストラップ3.xがhidden.bs.modalを使用する必要性:

$("#myModal").on("hidden.bs.modal", function() { 
    $('#result').html('yes,result'); 
}); 
0
$('.close').click(function() { 
    //Code to be executed when close is clicked 
    $('#result').html('yes,result'); 
}); 
+0

この回答は参考になったブートストラップ関連。 – Heitor

41

バージョンを使用している場合Bootstrapの3.xでは、これを行う正しい方法は次のとおりです。

$('#myModal').on('hidden.bs.modal', function (e) { 
    // do something... 
}) 

詳細については、イベントセクションまでスクロールしてください。

http://getbootstrap.com/javascript/#modals-usage

これは、いつでも、バージョン4つのリリース(http://v4-alpha.getbootstrap.com/components/modal/#events)のために変わらないように見えますが、それがない場合、私は関連情報を、この記事を更新してくださいます。

2

特に動的コンテンツをお持ちの場合は、役に立つ可能性がある回答はほとんどありません。

$('#dialogueForm').live("dialogclose", function(){ 
    //your code to run on dialog close 
}); 

また、モーダルを開くときにコールバックを持ってください。

$("#dialogueForm").dialog({ 
       autoOpen: false, 
       height: "auto", 
       width: "auto", 
       modal: true, 
       my: "center", 
       at: "center", 
       of: window, 
       close : function(){ 
        // functionality goes here 
       } 
       }); 
関連する問題