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.

Answer 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');
});