我有两个模态窗口(“注册”和“登录”),我使用Twitter Bootstrap显示它们。
现在我需要这些行为:窗口“登录”可见,它有“注册”按钮,必须关闭窗口“登录”并显示窗口“注册”。
a)没有手动Javascript代码可以吗?
b)如何手动关闭Windows?
$('login').modal('hide');
无效。
答案 0 :(得分: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');
});
答案 1 :(得分:2)
a)你想要完成的东西需要一些(简单的)javascript / jquery。
$("#next").click(function(){
$('#firstModal').modal('hide');
$('#secondModal').modal('show');
});
有关完整标记,请参阅working fiddle。更高级的版本可能希望在#firstModal隐藏步骤上使用回调(可能使用.on technique)。
b)如果你的问题暗示你的模态的ID是“登录”,那么它就不起作用,因为你遗漏了哈希:
$('#login').modal('hide');