因此，我使用此代码在当前打开的模态窗口中打开另一个模态窗口：
<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>
发生的情况是，滚动条将重复大约 500 毫秒。我猜是因为当前的模态仍在淡出。然而，它看起来非常不流畅和口吃。
我将不胜感激任何解决此问题的建议。
另外，在点击事件中构建它的方式是否不专业？
我正在使用引导程序版本 3.0。
编辑：我想减少淡出模态的时间是必要的。这怎么可能？
data-dismiss 使当前模态窗口强制关闭
data-toggle打开一个包含href内容的新模式
<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>
或者
<a data-dismiss="modal" onclick="call the new div here">Click</a>
请让我们知道它是否有效。
我的解决方案不会关闭较低的模态，而是真正堆叠在它之上。它正确地保留了滚动行为。在 Bootstrap 3 中测试。要使模态按预期堆叠，您需要在 Html 标记中将它们从最低到最高排序。
$(document).on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});更新：当您堆叠模态时，所有背景都出现在最低模态下方。您可以通过添加以下 CSS 来解决此问题：
.modal-backdrop {
visibility: hidden !important;
}
.modal.in {
background-color: rgba(0,0,0,0.5);
}
这将在最顶部可见模态下方显示模态背景。这样它就会使下方的较低模态变灰。
Bootstrap 5（测试版）- 2021 年更新
模态的默认 z-index 已更改为 1060。因此，要覆盖模态和背景，请使用..
.modal:nth-of-type(even) {
z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
z-index: 1061 !important;
}
Bootstrap 4 - 2019 年更新
我发现大多数答案似乎都有很多不必要的 jQuery。只需使用 Bootstrap 提供的事件（例如show.bs.modal. 您可能还需要一些 CSS 来处理背景叠加。这里有 3 个“多模态”场景......
从另一个模态打开模态（保持第一个模态打开）
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="container"></div>
<div class="modal-body">
...
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="container"></div>
<div class="modal-body">
..
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
这种情况下的一个潜在问题是第二个模态的背景隐藏了第一个模态。为了防止这种情况，制作第二个 modal data-backdrop="static"，并添加一些 CSS 来修复背景的 z-indexes ...
/* modal backdrop fix */
.modal:nth-of-type(even) {
z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
z-index: 1051 !important;
}
https://codeply.com/go/NiFzSCukVl
从另一个模态打开模态（关闭第一个模态）
这类似于上面的场景，但是由于我们在打开第二个模式时关闭了第一个模式，因此不需要背景 CSS 修复。处理第二个模态show.bs.modal事件的简单函数会关闭第一个模态。
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://codeply.com/go/ejaUJ4YANz
在另一个模态内打开模态
最后一个多模态场景是在第一个模态内打开第二个模态。在这种情况下，第二个的标记放置在第一个内。不需要额外的 CSS 或 jQuery。
<div class="modal" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
...
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>
<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
</div>
要在当前打开的模态窗口中打开另一个模态窗口，
可以使用bootstrap-modal
试试这个
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>
<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test2">Open Modal 2</button>
</div>
</div>
</div>
</div>
<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
content
</div>
</div>
</div>
</div>
</body>
</html>