2012-11-18 9 views
7

私は下部に 'checkout'ボタン付きの簡単なブートストラップモードを表示しています。私がしたいボタンをクリックすると遅延付きのブートストラップモーダル( 'hide')をチェーン

  1. は、例えば、モーダルを閉じます$( '#myModal')。モーダル( '隠す')
  2. 待ちアニメーションが私の 'チェックアウト' ページへwindow.location.href
  3. の変更を終了するまで。

私はすぐに次の機能を実行することなく連鎖する方法を見つけることができないようです。

$('#myModal').modal('hide').each(function() { 
    window.location.href = '/checkout'; 
}); 

または私はdelay()が役立つかもしれないと考えました。

$('#myModal').modal('hide').delay(1000).each(function() { 
    window.location.href = '/checkout'; 
}); 

これは機能しません。それはただページを瞬時に変更します。

これは一般的なjQueryの問題ですか?または、これを処理するためにブートストラップを拡張する必要がありますか?

答えて

10

hiddenと呼ばれるイベントがあります。これは、twitterブートストラップモードが完全に非表示になっている場合です。だからあなたは次のようなことをすることができます:

$('#myModal').bind('hidden', function(){ 
    window.location.href = '/checkout'; 
}).modal('hide'); 
+4

私はこれを答えに加えたいと思いました。 'bind'の代わりに' one'を使うことができます。したがって、あなたの関数は、あなたの次のメソッド呼び出しを隠す直後に** **一度だけ実行されます。そして、はい、チェックアウトボタンのクリックでこのコード全体を実行する必要があります。 – Inferpse

+0

ありがとう、私は上記のように試して、それは働いた。私はスコープが 'チェックアウト'ボタンのクリックだけでなく、すべてのモーダルクローズに適用されると思ったので、最初は躊躇しましたが、それは完全に機能します! – AndyC

+8

ブートストラップ3で全く同じ動作を探している場合は、 "hidden"ではなく "hidden.bs.modal"イベントを使用してください。 – mdrozdziel