Twitter Bootstrap - 打开一个模态框并覆盖已经打开的模态框

Question

这是我的场景：我正在打开一个包含记录详细信息的模态窗口，并且有一个“删除”按钮。当用户单击此按钮时，我需要在现有模态窗口上方/覆盖它显示一个“确认”模态窗口（询问“您确定吗？”），但是当此确认模态窗口显示时，它不会阻止后面的“详细信息”模态窗口。 有人知道如何做到这一点吗？ 谢谢！

- Rodrigo Pires

---

看起来并没有确切的答案，但是可以考虑使用这个扩展到模态类中去：https://github.com/jschr/bootstrap-modal - Joel B

一个可工作的示例可以在http://bootply.com/lvKQA2AM28找到。 - CrandellWS

我在这里回答了同样的问题：https://dev59.com/yWIk5IYBdhLWcg3wKLSd#32513228 - Elon Gomes Vieira

Answer 1

你需要做的就是将确认模态框的标记放在代码中低于详情模态框的位置。

- Rob

---

你真是个天才。我找了将近一天才找到这个。 - Chris Sharp

尝试使用非常长的第一个模态框。您会发现在关闭第二个模态框后，背景滚动而不是前景。文档明确说明“不支持多个打开的模态框。[这]需要自定义代码。” - interDist

interDist - 我同意，自从我自己发现这一点后，我现在在我的应用程序中只显示一个模态。 - Rob

这个解决方案解决了我的问题 - 我的问题是“确认”模态框中的按钮（在我的情况下是“点击此处，否则您将被自动注销”）无法工作。 - gordon613

@interDist：您可以在此处查看解决方法：https://github.com/twbs/bootstrap/issues/20607#issuecomment-247690824。基本上是在关闭第二个模态框时将modal-open类添加到body中。 - Monster Brain

不起作用... - TV-C-1-5

Answer 2

这很容易做到。您已经打开的模态框中的链接应该像这样：

<a href="NEW URL" data-dismiss="modal" data-toggle="modal" data-target="#newModal">Anchor text</a>

data-dismiss="modal" ->将关闭该模态框 = 这就是诀窍！！！
data-toggle="modal" ->将打开新的对话框

享受吧！

- Oleg Veselkov

---

这并没有回答问题。 - darksky

那回答了问题！ 第一个模态框中的链接应为：<a href="" data-toggle="modal" data-target="#newModal">链接</a> - Mohamed Anis Dahmani

据我所知，如果高度很长，第二个模态框的滚动条将无法工作。 - Giraldi

问题是如何让一个模态框覆盖另一个模态框，而不是在打开另一个模态框之前关闭一个模态框。 - TV-C-1-5

Answer 3

当点击 #deleteButton 时，只需隐藏 #modal 并显示 #modal2。

$("#deleteButton").click(function() {
$('#myModal').modal('hide')
$('#myModal2').modal('show')    
});

这是一个可行的示例：http://jsfiddle.net/baptme/nuUzN/14/

- baptme

---

如果高度很长，第二个模态框的滚动将无法工作。 - Giraldi

在执行新的模态框之前，您应该先检测旧的模态框是否关闭... 这是我的解决方案：https://dev59.com/yWIk5IYBdhLWcg3wKLSd#30250853 - Giraldi

问题是如何让一个模态框覆盖另一个模态框，而不是在打开另一个模态框之前关闭一个模态框。 - TV-C-1-5

Answer 4

如何给第二个模态框添加一个 z-index 呢？像这样：

<div class="modal fade" style="z-index:1051">modal content here...</div>

如果值1051不起作用，请尝试更高的数字，例如Bootstrap 5的1061。

- fedda

---

z-index = 1050 是默认值。我将第二个模态框的 z-index 改为了 1051，它可以正常工作。 - Strabek

快速解决方案。 - Avinash

@Strabek 你的解决方案救了我的一天！ :) - Ali Celebi

不错！我尝试了 z-index，但它没有起作用。我没意识到默认值是 1050。1051 对我也奏效了。 - eaglei22

在Bootstrap 5中，默认模态框的z-index为1060，而下一个元素（popover）的z-index为1070。对我来说，介于1061和1069之间的值就可以解决问题。 - Meilo

Answer 5

如果您想将第一个模态框放在后面，您需要做一些事情。请注意，这不受bootstrap（使用bootstrap 4.5）的支持。

正如@fedda所说，您需要为模态框元素指定z-index，以使其位于第一个模态框之上（1050是默认值），然后您还必须将背景幕布（模态框后面的所有内容都会变暗）的z-index设置为第一个模态框之上，最后，如果您的第一个模态框可以滚动（大型模态框或小屏幕），则必须在第二个模态框关闭时重新配置第一个模态框的滚动。

<div id="modal2" class="modal fade" style="z-index:1055">modal content here...</div>

然后在脚本中：

$("#modal2").on("hidden.bs.modal", () => 
    {$("#modalintheback").data("bs.modal")._setScrollbar();}
$("#modal2").modal();
$("#modal2").next(".modal-backdrop").attr("style", "z-index:1054;");

- Yepeekai

---

尽管此方法似乎可行，但如果我同时显示两个模态框，Bootstrap 会在 JavaScript 控制台中报错 Maximum call stack size exceeded。 - raquelhortab