我已经找了一段时间，但是找不到解决方案。我想要以下内容：
- 在Bootstrap模态框中打开一个URL。当然，这个功能我已经实现了，所以内容会动态加载。
- 当用户在此模态框内点击按钮时，我希望当前模态框隐藏，并立即打开新的URL（即用户单击的内容）。第二个模态框的内容也将动态加载。
- 如果用户关闭第二个模态框，则第一个模态框必须重新显示。
Bootstrap模态框：关闭当前，打开新的
105
- Eelco Luurtsema
3
Bootstrap 2还是3？你能否建立一个JS Fiddle来展示你所拥有的内容？ - Tim Wasson
Bootstrap 2.3.1。我认为我无法设置一个JS Fiddle，因为存在动态内容。 - Eelco Luurtsema
一篇详细的博客：http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal - Suresh Kamrushi
31个回答
88
我知道这是一个晚回答，但它可能有用。以下是一种适当和清晰的方法，就像@karima上面提到的那样。你实际上可以同时触发两个函数：trigger和dismiss模态框。
HTML标记：
<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>
<div class="modal fade" id="SELECTOR" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"> ... </div>
<div class="modal-footer"> <!-- ↓ --> <!-- ↓ -->
<ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
</div>
</div>
</div>
</div>
- Mahmoud
8
29不好，因为你会发现，在打开第一个模态框后，滚动页面正常工作，但是如果你从现有的模态框中启动另一个模态框，则滚动条会转移到后台。如果你有需要滚动的模态框（例如在移动设备上查看），这是一个大问题。 - Gravity Grave
我有一个非常类似的问题，但是在Angular中。您知道如何在Angular控制器中使用
templateUrl和windowClass属性执行与此处相同的操作吗？ - John R1谢谢 - 对我也有效。对我来说主要问题是我错过了按钮上的
data-dismiss="modal"。 - FDisk由于某种原因，在打开新模态时，“model-open”类从<body>中消失，导致滚动行为混乱。请确保已设置该类。
$（document）.ready（function（）{
$（'#YOURMODAL'）。on（'shown.bs.modal'，function（）{
$（'body'）。addClass（'modal-open'）;
}）;
}）; - EvilSmurf当使用淡入淡出选项时，这个功能无法正常工作。https://dev59.com/oV8e5IYBdhLWcg3w0dNJ#44391959 - Daniel Dewhurst
显示剩余3条评论
82
没有看到具体的代码，很难给你一个精确的答案。但是，从 Bootstrap 文档中，您可以像这样隐藏模态框：
$('#myModal').modal('hide')
然后，在它隐藏后再显示另一个模态框：
$('#myModal').on('hidden.bs.modal', function () {
// Load up a new modal...
$('#myModalNew').modal('show')
})
你需要找到一种方式将URL推送到新的模态窗口中，但我认为这应该很简单。由于看不到代码，很难给出例子。
- Tim Wasson
5
很奇怪，我用Bootstrap 3让它工作了。我认为我的代码与Bootstrap工具提示存在冲突，在版本3中已经改变了。谢谢。 - Eelco Luurtsema
9在Bootstrap v3中，事件名为'hidden.bs.modal'，意为模态框隐藏时触发。 - coure2011
3使用带有"data-dismiss"的解决方案更加优雅（至少在2015年），并且不需要任何非Bootstrap JavaScript。 - Manuel Arwed Schmidt
感谢 @coure2011 - capcom
7这很好地运作了：data-toggle="modal" data-target="#targetmodal" data-dismiss="modal"。 - Sushan
48
虽然不是完全相应，但当您想关闭当前模态框并打开一个新模态框时，它非常有用。
在同一个按钮的 HTML 中，您可以使用 data-dismiss 请求关闭当前模态框，并直接使用 data-target 打开一个新模态框：
<button class="btn btn-success"
data-toggle="modal"
data-target="#modalRegistration"
data-dismiss="modal">Register</button>
- Karima Rafes
5
2
data-dismiss="modal" 的问题在于，当您关闭第二个模态框时，它会将您的内容向左移动。 - Kuldeep Dangi2这个方法对我不起作用。第一个消失了，但第二个从未出现。 - KevinDeus
我不确定你遇到了什么问题，Kevin，但是在Bootstrap 3中它对我来说运行良好。第一个模态框消失后，另一个就可以正常打开 :) - RolandiXor
对我来说非常好用！而且解决方案非常简单。谢谢！ - guero64
简单易懂的方式是展示和隐藏模态框的最佳解决方案。 - Robin
12
data-dismiss="modal" 的问题是它会使你的内容向左移动。
我分享一下对我有用的解决方法，问题陈述是从 pop2 打开 pop1。
JS 代码
var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
if (showPopup2) {
$('#popup2').modal('show');
showPopup2 = false;
}
});
$("#popup2").click(function() {
$('#popup1').modal('hide');
showPopup2 = true;
});
- Kuldeep Dangi
1
2这是一个如此简单的解决方案 :) - Geoff
12
我使用这种方法：
$(function() {
return $(".modal").on("show.bs.modal", function() {
var curModal;
curModal = this;
$(".modal").each(function() {
if (this !== curModal) {
$(this).modal("hide");
}
});
});
});
- Josh Dean
7
如上所述，在同一个按钮的HTML中，您可以使用data-dismiss关闭当前模态窗口并直接使用data-target打开新模态窗口：
<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">注册</button>
但这会导致滚动条消失，并且如果第二个模态窗口比第一个高，您会注意到这一点。
因此，解决方案是在模态窗口的内联样式中添加以下样式：
style="overflow-y:scroll;"
- anouar es-sayid
2
完美补充了上述提供的解决方案所需的一切。非常感谢！ - Owais Sonija
我还添加了样式来隐藏模态框的滚动条。
scrollbar-width: none; -ms-overflow-style: none; ::-webkit-scrollbar {display: none;} - nxxn4
通过使用以下代码，您可以隐藏第一个模态框并立即打开第二个模态框，通过使用相同的策略，您可以隐藏第二个模态框并显示第一个模态框。
$("#buttonId").on("click", function(){
$("#currentModalId").modal("hide");
$("#currentModalId").on("hidden.bs.modal",function(){
$("#newModalId").modal("show");
});
});
- Husnain Shabbir
1
修复了滚动问题。 - Richard Housham
4
data-dismiss="modal"
该功能用于关闭已打开的模型，您可以将其设置为新模型。
- M. Lak
1
我不确定这适用于所有版本的Bootstrap。在我的情况下，关闭模态框会导致新模态框打开，但它还会从body中删除模态框类，然后我无法向下滚动模态框。 - Bodokh
4
您需要在您希望添加此功能的链接或按钮中添加以下属性：
data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"
一篇详细的博客：http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/
- Suresh Kamrushi
1
与Bootstrap 4完美配合。 - Heather92065
3
对于Bootstrap v4
您可以通过在同一个HTML元素中添加 data-dismiss="modal" 和 data-toggle="modal" 来在模态框之间切换。 您还需要将 data-target 属性设置为要打开的模态框。
以下是一个例子：
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#Modal2" >
Open second modal
</button>
记得为每个模态框设置一个id，并使data-target指向您想要打开的模态框。
适用于bootstrap v5
与v4相同，只需使用属性data-bs-toggle、data-bs-dismiss和data-bs-target
像这样：
<button class="btn btn-primary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#Modal2" >
Open second modal
</button>
他们在v5文档中包含了一个示例来演示这个功能
注意:
为了使此功能正常工作，两个模态框需要彼此独立，而不是嵌套在彼此中。因此，如果您正在使用MVC框架（例如ASP.NET MVC）并将第一个模态框作为自己的局部视图，则不能在该视图中包含第二个模态框，您需要将第二个模态框放在父视图中。
- Naftoli Ost
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接