Bootstrap：在 Modal 中打开另一个 Modal
Posted
技术标签:
【中文标题】Bootstrap：在 Modal 中打开另一个 Modal【英文标题】：Bootstrap: Open Another Modal in Modal 【发布时间】：2013-10-31 22:21:30 【问题描述】：所以，我正在使用这段代码在当前打开的模式窗口中打开另一个模式窗口：
<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>
发生的情况是，滚动条会在 500 毫秒内重复。我猜是因为当前的模态仍在淡出。然而，它看起来非常不流畅和卡顿。
如果有任何解决此问题的建议，我将不胜感激。
另外，在 onclick-event 中构建这个的方式不专业吗？
我正在使用引导程序 3.0 版。
编辑：我想有必要减少淡出模式的时间。这怎么可能？
【问题讨论】：
可以在bootply.com/lvKQA2AM28找到一个工作示例 【参考方案1】：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>
让我们知道它是否有效。
您可能还想看看Modal Documentation【讨论】：
谢谢，它可以工作并且避免使用“onclick”。但是动画仍然使滚动条加倍。 @user2829128 这就是data-dismiss 所做的。它关闭当前窗口并打开一个新窗口。你可以在bootply 或jsfiddle 中发布你的代码吗？
如果高度较长，第二个模态的滚动将不起作用。
.modal overflow-y: auto 解决了 BS4 的滚动问题。
你帮了我很多@Riki137【参考方案2】：
要在当前打开的模态窗口中打开另一个模态窗口， 你可以使用bootstrap-modal
bootstrap-modal DEMO
【讨论】：
使用此引导模式将背景内容向右移动。 @Brian - 见这里：***.com/questions/46339063/…【参考方案3】：我的代码运行良好 使用数据关闭。
<li class="step1">
<a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
<p class="text-label">Step 1</p>
<p class="text-text">Plan your Regime</p>
</a>
</li>
<li class="step2">
<a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
<p class="text-label">Step 2</p>
<p class="text-text">Plan your menu</p>
</a>
</li>
<li class="step3 active">
<a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
<p class="text-label">Step 3</p>
<p class="text-text">This Step is Undone.</p>
</a>
</li>
【讨论】：
【参考方案4】：Twitter 文档说需要自定义代码...
这不需要额外的 javascript， 不过，强烈建议使用自定义 CSS...
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content bg-info">
<div class="modal-header btn-info">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modalOneLabel">modalOne</h4>
</div>
<div id="thismodalOne" class="modal-body bg-info">
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
Launch demo modal
</button>
<div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
<h3>EXAMPLE</h3>
</div>
</div>
<div class="modal-footer btn-info" id="woModalFoot">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Form Modals -->【讨论】：
这是另一个示例，第二个模式的格式正确bootply.com/qRsvPSrcO5 @Skelly 像在 css 中那样更改 z-index 是个好主意...z-index: 1080 !important;
如果您打开第二个模态并单击外部，它将被窃听。 （Chrome，最新）
也许我错了，但我相信文档说不要将模态放入模态，所以这并不奇怪【参考方案5】：
您实际上可以通过调用hidden.bs.modal 事件来检测旧模式何时关闭：
$('.yourButton').click(function(e)
e.preventDefault();
$('#yourFirstModal')
.modal('hide')
.on('hidden.bs.modal', function (e)
$('#yourSecondModal').modal('show');
$(this).off('hidden.bs.modal'); // Remove the 'on' event binding
);
);
欲了解更多信息：http://getbootstrap.com/javascript/#modals-events
【讨论】：
【参考方案6】：在一个项目中工作，该项目有很多模态调用其他模态和一些可能不知道每次都为每个按钮启动它的 html 人员。 与@gmaggio 得出了类似的结论，但在先走了很长一段路后很不情愿。
编辑：现在支持通过 javascript 调用的模式。
编辑：现在可以从另一个模式打开滚动模式。
$(document).on('show.bs.modal', function (event)
if (!event.relatedTarget)
$('.modal').not(event.target).modal('hide');
;
if ($(event.relatedTarget).parents('.modal').length > 0)
$(event.relatedTarget).parents('.modal').modal('hide');
;
);
$(document).on('shown.bs.modal', function (event)
if ($('body').hasClass('modal-open') == false)
$('body').addClass('modal-open');
;
);
只需将模态调用按钮正常放入，如果被拾取到模态内，它将先关闭当前的，然后再打开 data-target 中指定的那个。
请注意，relatedTarget 由 Bootstrap 提供。
我还添加了以下内容以稍微消除褪色： 不过，我确信可以做更多的事情。
.modal-backdrop.fade + .modal-backdrop.fade
transition: opacity 0.40s linear 0s;
【讨论】：
不是 100% 你的问题，但显示的.bs.modal 钩子有点方便。在 BS v.3.3.5 中，body.modal-open 类的管理似乎有问题，在关闭一个模式并打开另一个模式后，它丢失了，因此背景正在滚动而不是（第二个）模式。你的 Hook 可以修复这种行为。【参考方案7】：我的解决方案没有关闭较低的模态，而是真正堆叠在它之上。它正确地保留了滚动行为。在 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);
这将在最上面的可见模态下方给出模态背景的外观。这样一来，它会使您的下部模态变灰。
【讨论】：
页面标记中后面的项目具有自然较高的 z-index，并将堆叠在标记中较早出现的项目之上。除非你设置了明确的 z-index。 @H Dog：正是我需要的:) 完美。谢谢！ 真正的传奇！！每当有人建议为此使用插件时，我都会翻转...只是想为一个简单的问题提供一个简单的解决方案，然后就可以了...干杯！ 非常感谢您的帮助。当我同时使用两个模态时，您的解决方案解决了我的问题！！！！！！ Javascript 适用于 Bootstrap 4，但是 CSS 没有。相反，我隐藏了背景，然后添加了 .modal:after content: "";显示：块；背景：rgba(0,0,0, .5);位置：固定；顶部：0；底部：0；宽度：100%； z 指数：-1； 【参考方案8】：试试这个
<!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>【讨论】：
fail for me.. =( 模态有效，但如果第一个模态很长，则出现第一个模态的滚动，并且当您打开第二个模态并关闭它时，第一个模态滚动无法工作. 非常感谢，帮了大忙:)【参考方案9】：我的可滚动模式也遇到了一些问题，所以我做了这样的事情：
$('.modal').on('shown.bs.modal', function ()
$('body').addClass('modal-open');
// BS adds some padding-right to acomodate the scrollbar at right
$('body').removeAttr('style');
)
$(".modal [data-toggle='modal']").click(function()
$(this).closest(".modal").modal('hide');
);
它将服务于任何出现的模态。 请注意，第一个已关闭，因此第二个可以出现。 Bootstrap 结构没有变化。
【讨论】：
【参考方案10】：试试这个：
// Hide the login modal
$('#login').modal('hide');
// Show the next modal after the fade effect is finished
setTimeout(function() $('#lost').modal('show'); , 500);
这个简单的技巧对我有用。
【讨论】：
【参考方案11】：关闭第一个 Bootstrap modal 并动态打开新的 modal。
$('#Modal_One').modal('hide');
setTimeout(function ()
$('#Modal_New').modal(
backdrop: 'dynamic',
keyboard: true
);
, 500);
【讨论】：
【参考方案12】：我一起走了一条不同的路，我决定“去巢”他们。也许有人会觉得这很方便……
var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal"); //get reference to nested modal
$m1.after($innermodal); // snatch it out of inner modal and put it after.
【讨论】：
非常感谢【参考方案13】：模态中的模态：
$('.modal-child').on('show.bs.modal', function ()
var modalParent = $(this).attr('data-modal-parent');
$(modalParent).css('opacity', 0);
);
$('.modal-child').on('hidden.bs.modal', function ()
var modalParent = $(this).attr('data-modal-parent');
$(modalParent).css('opacity', 1);
);<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>
<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
<a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
</div>
</div>
</div>
</div>
<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header 1</h4>
</div>
<div class="modal-body">
<p>Two modal body…1</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header 2</h4>
</div>
<div class="modal-body">
<p>Modal body…2</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>【讨论】：
fail for me.. =( 模态有效，但如果第一个模态很长，则出现第一个模态的滚动，并且当您打开第二个模态并关闭它时，第一个模态滚动无法工作. 上面的示例生成模态以代替第一个模态，而不是在顶部也不在（第一个不再可见）。 效果很好。 如何在语义 UI 中使用您的解决方案？ 我在我的项目中应用了这个解决方案，但是当我关闭阻止点击任何东西的模式时，我的整个窗口变得模糊【参考方案14】：对于使用 bootstrap 4 的人 https://jsfiddle.net/helloroy/tmm9juoh/
var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e)
$('.modal-backdrop:last').css('zIndex',1051+modal_lv);
$(e.currentTarget).css('zIndex',1052+modal_lv);
modal_lv++
);
$('.modal').on('hidden.bs.modal', function (e)
modal_lv--
);<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">
Launch demo modal a
</button>
<div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="my-3">That's all.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>【讨论】：
这很好，剩下的唯一问题是防止最上面的模态关闭时滚动条重新出现【参考方案15】：$(document).on('hidden.bs.modal', function (event)
if ($('.modal:visible').length)
$('body').addClass('modal-open');
);【讨论】：
【参考方案16】：对于引导程序 4，为了扩展 @helloroy 的答案，我使用了以下内容；-
var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e)
if ( modal_lv > 0 )
$('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
$(e.target).css('zIndex',1051+modal_lv) ;
modal_lv++ ;
).on('hidden.bs.modal', function()
if ( modal_lv > 0 )
modal_lv-- ;
);
上面的好处是只有一个modal时它不会有任何效果，它只会在多个modal时生效。其次，它将处理委托给主体，以确保当前未生成的未来模态仍然得到满足。
更新
改用 js/css 组合解决方案改进了外观 - 淡入淡出动画继续在背景上工作；-
var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e)
if ( modal_lv > 0 )
$(e.target).css('zIndex',1051+modal_lv) ;
modal_lv++ ;
).on('hidden.bs.modal', function()
if ( modal_lv > 0 )
modal_lv-- ;
);
结合下面的css；-
.modal-backdrop ~ .modal-backdrop
z-index : 1051 ;
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
z-index : 1052 ;
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
z-index : 1053 ;
这将处理嵌套最多 4 层的模式，这超出了我的需要。
【讨论】：
它在 Bootstrap 4 中不起作用。当您关闭第二个模式时，第一个模式不再可以滚动。【参考方案17】：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 5 multiple modals
引导程序 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>
这种情况下的一个潜在问题是第二个模态的背景隐藏了第一个模态。为了防止这种情况，请制作第二个模态 data-backdrop="static"，并添加一些 CSS 来修复背景的 z-index...
/* 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
打开模态内部另一个模态
最后一个多模态场景是在第一个模态中打开第二个模态。在这种情况下，第 2 个的标记放在第 1 个内部。不需要额外的 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>
https://codeply.com/go/iSbjqubiyn
【讨论】：
它在 Bootstrap 4 中不起作用。当您关闭第二个模式时，第一个模式不再可以滚动。 @Justin - 我没有看到证明这一点的特定场景，因为滚动超出了原始问题的范围。我建议您寻找或提出另一个特定于滚动问题的问题。 nth-of-type 对我不起作用，因为它不看类。我得到了它的工作：.modal-backdrop.show + .modal.show z-index: 1052 !important; .modal-backdrop.show + .modal.show + .modal-backdrop.show z-index: 1051 !important;
我删除了fade calss，即我使用<div class="modal fade" 而不是<div class="modal"，它解决了我的问题。
@Zim 使用 BS5，在彼此之上打开模态，由于某种原因，我必须使用 :nth-of-type(odd) 来完成这项工作（在 Chrome 上），不知道为什么，因为第二个背景实际上放置在第一个背景之后......因此应该选择“偶数”......【参考方案18】：
The answer given by H Dog 很棒，但这种方法实际上在 Internet Explorer 11 中给了我一些模态闪烁。 Bootstrap 将首先隐藏模态删除 'modal-open' 类，然后（使用 H Dogs 解决方案）我们再次添加 'modal-open' 类。我怀疑这以某种方式导致我看到的闪烁，可能是由于 HTML/CSS 渲染速度较慢。
另一个解决方案是首先防止引导程序从 body 元素中删除“modal-open”类。 使用 Bootstrap 3.3.7，内部 hideModal 函数的这种覆盖对我来说非常有效。
$.fn.modal.Constructor.prototype.hideModal = function ()
var that = this
this.$element.hide()
this.backdrop(function ()
if ($(".modal:visible").length === 0)
that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar()
that.$element.trigger('hidden.bs.modal')
)
在此覆盖中，“modal-open”类仅在屏幕上没有可见模式时才会被移除。并且您可以防止一帧删除和添加类到 body 元素。
只需在加载引导程序后包含覆盖即可。
【讨论】：
【参考方案19】：为什么不直接改变模态体的内容呢？
window.switchContent = function(myFile)
$('.modal-body').load(myFile);
;
在模态框里放一个链接或按钮
<a href="Javascript: switchContent('myFile.html'); return false;">
click here to load another file</a>
如果你只是想在 2 种模式之间切换：
window.switchModal = function()
$('#myModal-1').modal('hide');
setTimeout(function() $('#myModal-2').modal(); , 500);
// the setTimeout avoid all problems with scrollbars
;
在模态框里放一个链接或按钮
<a href="Javascript: switchModal(); return false;">
click here to switch to the second modal</a>
【讨论】：
这更像是一个与 UX 相关的答案，因为我需要它来显示有关 Modal #1 的错误消息。所以模态＃2有错误消息。但是自从我问这个问题以来已经有很多年了，现在我正在以不同的方式做这种事情。【参考方案20】：试试这个：
$('.modal').on('hidden.bs.modal', function ()
//If there are any visible
if($(".modal:visible").length > 0)
//Slap the class on it (wait a moment for things to settle)
setTimeout(function()
$('body').addClass('modal-open');
,100)
);
【讨论】：
【参考方案21】：这个帖子很旧，但对于那些来自谷歌的人来说，我提供了一个混合了我在网上找到的所有答案的解决方案。
这将确保正在添加关卡类：
$(document).on('show.bs.modal', '.modal', function (event)
$(this).addClass(`modal-level-$$('.modal:visible').length`);
);
在我的 SCSS 中，我写了一条支持主模式和顶部 10 的规则（10 是因为发生了 z-index: 1060 弹出窗口），如果你愿意，你可以在 _variables.scss 中添加级别计数：
@for $level from 0 through 10
.modal-level-#$level
z-index: $zindex-modal + $level;
& + .modal-backdrop
z-index: $zindex-modal + $level - 1;
不要忘记你不能在 modal 里面有 modal，因为它们的控件会被弄乱。就我而言，我所有的模态都在body 的末尾。
最后正如下面的成员也提到的，在关闭一个模式后，您需要在body 上保留modal-open 类：
$(document).on('hidden.bs.modal', function (e)
if ($('.modal:visible').length > 0)
$('body').addClass('modal-open');
);
【讨论】：
【参考方案22】：如果您没有正确关闭第一个模式，将会出现滚动故障。 这是使用 Bootstrap 4 的示例
HTML：
<div class="modal fade" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<button onclick="goToModal2">
Go To Modal 2
</button>
</div>
</div>
</div>
<div class="modal fade" id="modal-2">
<div class="modal-dialog">
<div class="modal-content">
<button onclick="goToModal1">
Go To Modal 1
</button>
</div>
</div>
</div>
Javascript：
function goToModal2()
$("#modal-1").modal("hide");
$("#modal-1").on("hidden.bs.modal", () =>
$("#modal-2").modal("show");
$("#modal-1").unbind("hidden.bs.modal");
);
function goToModal1()
$("#modal-2").modal("hide");
$("#modal-2").on("hidden.bs.modal", () =>
$("#modal-1").modal("show");
$("#modal-2").unbind("hidden.bs.modal");
);
虽然这不是最好的方法。但它对我来说非常有效。
【讨论】：
【参考方案23】：您可以使用此代码使用超过 2 个模态（此示例使用 3 个模态）：
$('.modal').on('shown.bs.modal', function (e)
$('.modal.show').each(function (index)
$(this).css('z-index', 1101 + index*2);
);
$('.modal-backdrop').each(function (index)
$(this).css('z-index', 1101 + index*2-1);
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<a data-toggle="modal" href="#myModal1" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal 1</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
<p>
Content 1.
</p>
<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>
<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">modal 2</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
<p>
modal 2
</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
<a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal3</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal3">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal 3</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
<p>
modal 3
</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>【讨论】：
以上是关于Bootstrap：在 Modal 中打开另一个 Modal的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap modal 可在 Firefox 中使用，但不能在 Chrome 中使用
从另一个组件打开 angular Powered bootstrap 模态