How to switch modal windows using Twitter Bootstrap?

Question

I have two modal windows ("register" and "login") and I show them using Twitter Bootstrap.

Now I need these behavior: window "login" is visible, it have button "Register", which must to close window "login" and show window "register".

a) Is it possible without manual Javascript code?

b) How I can to close windows manually?

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

is not working.

Solution 1

Like this http://jsfiddle.net/bbAsC/ ??

Two buttons, register and login - two modals respectively, if you click on "register" in the login modal, it closes login and shows register instead.

Markup

<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>

script

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

Solution 2

a) What you want to accomplish requires some (simple) javascript/jquery.

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

See the working fiddle for the full markup. A more advanced version would probably want to use a callback on the #firstModal hide step (possibly by using the .on technique).

b) If the ID of your modal is 'login' as your question suggests, then it's not working because you left out the hash:

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

Comments

[indapublic]

Yes, it is. Thank you very much