2

我有两个模式窗口(“注册”和“登录”),我使用 Twitter Bootstrap 显示它们。

现在我需要这些行为:窗口“登录”是可见的,它有按钮“注册”,它必须关闭窗口“登录”并显示窗口“注册”。

a) 没有手动 Javascript 代码是否可行?

b)如何手动关闭窗口?

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

不管用。

4

2 回答 2

5

像这样http://jsfiddle.net/bbAsC/ ??

两个按钮,注册和登录 - 分别是两个模式,如果您在登录模式中单击“注册”,它将关闭登录并显示注册。

标记

<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');
});
于 2012-11-21T14:25:45.943 回答
2

a)您想要完成的工作需要一些(简单的)javascript/jquery。

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

有关完整标记,请参阅工作小提琴。更高级的版本可能希望在 #firstModal 隐藏步骤上使用回调(可能通过使用.on 技术)。

b)如果您的模式的 ID 是“登录”,如您的问题所示,那么它不起作用,因为您遗漏了哈希:

$('#login').modal('hide');
于 2012-11-21T14:15:37.530 回答