如何在打开新的模态框时隐藏Bootstrap之前的模态框？

Question

我遇到了这样的问题：我使用Bootstrap模态框进行身份验证。当用户打开登录模态框时，他可以进入注册模态框（或其他模态框）。因此，我需要关闭先前的模态框。

现在，我是这样关闭它们的：

$(document).ready(function(){
  $("a").click(function() {
  $("#login").hide();
  $("#sign_up").hide();
 })  
});

但是，当我这样做时 - 在从登录页面点击注册后，我无法重新打开登录弹出窗口直到刷新页面。

有人能建议一下如何检查我在哪个模态框上点击了链接并在调用另一个模态框时关闭它吗？是否有一种通用的方法来关闭先前的模态框？

- MID

Answer 1

你可以使用以下方式隐藏Bootstrap模态框：

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

说 $().hide() 会使匹配的元素不可见，但对于模态相关的代码而言，它仍然存在。请参阅Modals文档中的方法部分。

- willglynn

---

willglynn，我知道如何隐藏它，但我需要一些逻辑上的帮助。我可以创建一个示例，你能看一下吗？ - MID

你的示例使用 $().hide 隐藏，而不是 $().modal('hide')。但是，确实，JSFiddle 会很有帮助。 - willglynn

是的，它比我的工作效果好。我没有集中注意力。谢谢你） - MID

这个已经成功了，谢谢。 - Tim Bogdanov

Answer 2

切换两个模态框

$('#modalOne').modal('toggle');
$('#modalTwo').modal('toggle');

- Vikash Kumar

Answer 3

我能做到的最好的是：

$(this).closest('.modal').modal('toggle');

这将获得包含您触发事件的DOM对象的模态框（猜测您点击了一个按钮）。获取最近的父级 '.modal' 并切换它。显然，这仅在您点击的模态框内起作用。

但是您也可以这样做：

$(".modal:visible").modal('toggle');

这会获取显示的模态框（因为一次只能打开一个），并触发“toggle”。如果没有“:visible”，这将无法工作。

- TolMera