jquery - Twitter Bootstrapを使用してモーダルウィンドウを切り替える方法は?

Question

2 つのモーダル ウィンドウ (「登録」と「ログイン」) があり、Twitter Bootstrap を使用して表示します。

ウィンドウ「ログイン」が表示され、ウィンドウ「ログイン」を閉じてウィンドウ「登録」を表示する必要がある「登録」ボタンがあります。

a) 手動の Javascript コードなしで可能ですか?

b) ウィンドウを手動で閉じるにはどうすればよいですか?

$('login').modal('hide');

動かない。

Answer 1

このようにhttp://jsfiddle.net/bbAsC/ ??

2つのボタン、登録とログイン-それぞれ2つのモーダル。ログインモーダルで[登録]をクリックすると、ログインが閉じられ、代わりに登録が表示されます。

マークアップ

<a href="#login" role="button" class="btn" data-toggle="modal">Login</a>
<a href="#register" role="button" class="btn" data-toggle="modal">Register</a>

<!-- Modals -->
<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Login</h3>
  </div>
  <div class="modal-body">
    <p>body</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
    <button class="btn btn-primary" id="login-register">Register</button>
  </div>
</div>

<div id="register" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Register</h3>
  </div>
  <div class="modal-body">
    <p>body</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
    <button class="btn btn-primary">Cancel</button>
  </div>
</div>

脚本

$("#login-register").click(function() {
    $("#login").modal('hide');
    $("#register").modal('show');
});

Answer 2

a) 達成したいことには、(単純な) javascript/jquery が必要です。

$("#next").click(function(){
    $('#firstModal').modal('hide');
    $('#secondModal').modal('show');
});​

完全なマークアップについては、作業フィドルを参照してください。より高度なバージョンでは、おそらく #firstModal hide ステップでコールバックを使用する必要があります (おそらく.on テクニックを使用して)。

b）質問が示唆するようにモーダルのIDが「ログイン」の場合、ハッシュを省略したため機能しません：

$('#login').modal('hide');