twitter-bootstrap 如何使用 Twitter Bootstrap 切换模态窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13488706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to switch modal windows using Twitter Bootstrap?
提问by indapublic
I have two modal windows ("register" and "login") and I show them using Twitter Bootstrap.
我有两个模态窗口（“注册”和“登录”），我使用 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?
a) 没有手动 Javascript 代码是否可能？
b) How I can to close windows manually?
b) 如何手动关闭窗口？
$('login').modal('hide');
is not working.
不管用。
回答by davidkonrad
Like this http://jsfiddle.net/bbAsC/??
像这样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');
});
回答by technoTarek
a) What you want to accomplish requires some (simple) javascript/jquery.
a) 您想要完成的任务需要一些（简单的）javascript/jquery。
$("#next").click(function(){
$('#firstModal').modal('hide');
$('#secondModal').modal('show');
});?
See the working fiddlefor 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).
有关完整标记，请参阅工作小提琴。更高级的版本可能希望在 #firstModal 隐藏步骤上使用回调（可能通过使用.on 技术）。
b) If the ID of your modal is 'login' as your question suggests, then it's not working because you left out the hash:
b) 如果您的模态 ID 如您的问题所暗示的那样是“登录”，则它不起作用，因为您遗漏了哈希：
$('#login').modal('hide');
