Twitter bootstrap - 在已经打开的模式上打开模式答案

【问题标题】：Twitter bootstrap - open modal over an already opened modalTwitter bootstrap - 在已经打开的模式上打开模式
【发布时间】：2012-05-03 17:17:09
【问题描述】：

这是我的场景：我正在打开一个带有一些记录详细信息的模式窗口，并且我有一个“删除”按钮。当用户单击此按钮时，我需要在现有模式上方/上方显示“确认”模式（询问“您确定吗？”），但是当显示此确认模式时，它不会首先阻止“详细信息”模态（后面）。

有人知道我该怎么做吗？

谢谢！

【问题讨论】：

似乎没有太多的实际答案，但是模态类的这种扩展可能是要走的路：github.com/jschr/bootstrap-modal
可以在bootply.com/lvKQA2AM28找到一个工作示例
我在这里回复了同样的问题：stackoverflow.com/questions/19528173/…

标签： twitter-bootstrap modal-dialog confirmation

【解决方案1】：

点击#deleteButton时，隐藏#modal并显示#modal2

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

这是一个工作示例：http://jsfiddle.net/baptme/nuUzN/14/

【讨论】：

如果高度较长，第二个模态的滚动将不起作用。
您应该先检测旧模式何时关闭，然后再执行新模式...这是我的解决方案：stackoverflow.com/a/30250853/851045

【解决方案2】：

这很容易做到。您已经打开的模式中的链接必须如下所示：

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

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

享受吧！

【讨论】：

这不能回答问题。
确实回答了这个问题！第一个模式内的链接应该是：Link
据我所知，如果高度很长，第二个模态的滚动将不起作用。

【解决方案3】：

您需要做的就是将确认模式的标记放在代码中低于详细信息模式的位置。

【讨论】：

你是个天才。我找了差不多一天。
用很长的第一个模态试试这个。您会看到在关闭第二个模式后，背景滚动而不是前景。文档明确指出“不支持多个打开模式。[这]需要自定义代码。”
interDist - 我同意，我自己发现了这一点。我现在在我的应用程序中一次只显示一个模式
这个解决方案解决了我的问题 - 这是“确认”模式的按钮（在我的情况下 - “单击此处，否则您将被自动注销”）不起作用。
@interDist：您可以在此处查看解决方法：github.com/twbs/bootstrap/issues/20607#issuecomment-247690824。基本上在关闭第二个模式时将 modal-open 类添加到正文中。

【解决方案4】：

给第二个模态添加一个 z-index 怎么样？喜欢：

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

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

【讨论】：

z-index = 1050 id 默认值。我将第二个模态的 z-index 更改为 1051，它可以工作。
快速解决方案。
@Srabek 你的解决方案拯救了我的一天！ :)
不错！我尝试了 z-index，但它不起作用。没有意识到默认值是 1050。1051 也对我有用。
在 Bootstrap 5 中，默认的模态 z-index 为 1060，而按顺序排列的下一个元素为 1070（弹出框）。 1061 到 1069 之间的值对我有用。

【解决方案5】：

如果您想将第一个模态框保留在后面，您必须做几件事。请注意，引导程序不支持它（使用引导程序 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;");

【讨论】：