提问人：andre.hey 提问时间：11/8/2023 最后编辑：andre.hey 更新时间：11/21/2023 访问量：117
如何在不关闭旧模式的情况下打开多个 Bootstrap 5 模式？
How can I open multiple Bootstrap 5 modals without closing the old ones?
问：
对于我的项目，我使用 bootstrap 5.2 及更早版本，例如 bootstrap 3。在 3 中，可以打开多个模态，例如前面的模态，然后打开一个新的模态，依此类推。模态窗口相互重叠。
在 bootstrap 5 中，它工作正常，但在 5.2 中，第一个模态关闭，新模态打开。它不像在新的重叠中。
没有使用旧引导程序 5 的选项。我需要 5.2 或更高版本。如果有人知道解决方法，我将不胜感激。
感谢您抽出宝贵时间接受采访。
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body class="p-4">
<a data-bs-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
<div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<a data-bs-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer">
<a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark">Close</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-bs-backdrop="static" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
<div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here. Content for the dialog / modal goes here. Content for the dialog / modal goes here. Content for the dialog / modal goes here. Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
<a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>编辑：这是带有引导程序 5 和 5.2 的 sinppet（注释输入或注释以查看差异）https://codepen.io/andre-hey/pen/XWOMzrg
答：
2赞
DS87
11/13/2023
#1
我不建议你改变它。但是，查看 “Modal” 部分的 boostrap.js 文件，版本 5.2.3 中有以下行：
if (alreadyOpen) {
Modal.getInstance(alreadyOpen).hide();
}
此代码关心只有一个 Modal 处于打开状态。如果一个模态将打开而另一个模态处于打开状态，则打开的模态将关闭。
1赞
Amin Mashayekhan
11/20/2023
#2
在我看来，如果您确定需要同时拥有两个打开的模态，则无需更改 bootstrap.js 文件。我在 Bootsrtap 5.2.3 中尝试了以下方法。你可以尝试这样的东西：
注意：为了使第二个模态位于第一个模态的前面（而不是它后面），您需要在第一个模态的 HTML 代码之后（下方）添加第二个模态的 HTML 代码（否则您需要使用 z-index 对其进行管理）。在您的示例代码中，这没关系。
步骤1： 将bootstrap.js文件添加到HTML文件后，在其下方，在HTML文件或其他js文件中定义以下函数（例如，我在HTML文件中定义它）：
<script>
function openMyModal2() {
let myModal = new
bootstrap.Modal(document.getElementById('myModal2'), {});
myModal.show();
}
</script>第 2 步：将 onclick 属性添加到要打开第二个模式的按钮。在您的情况下，它是标签：a
<a class="btn btn-primary" onclick="openMyModal2()">Launch (my)modal(2)</a>现在，如果您单击该标签，它们都将打开。a
第 3 步（可选）：在第一个（后）模态上添加一个深色层（例如，通过向第二个模态添加类，如下所示：bg-dark
<div class="modal bg-dark bg-opacity-50" id="myModal2" data-bs-backdrop="static" style="display: none;" aria-hidden="true">您可以在以下链接中看到结果：https://codepen.io/amin-mashayelhan/pen/XWOZygx
评论
show