Question

我有两个模态窗口（“注册”和“登录”），我使用Twitter Bootstrap显示它们。

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

a）没有手动Javascript代码可以吗？

b）如何手动关闭Windows？

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

无效。

Answer 1

像这样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');
});

Answer 2

a）你想要完成的东西需要一些（简单的）javascript / jquery。

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

有关完整标记，请参阅working fiddle。更高级的版本可能希望在#firstModal隐藏步骤上使用回调（可能使用.on technique）。

b）如果你的问题暗示你的模态的ID是“登录”，那么它就不起作用，因为你遗漏了哈希：

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

如何使用Twitter Bootstrap切换模态窗口？

2 个答案: