Question

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

有谁知道我该怎么做？

谢谢！

Answer 1

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

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

data-dismiss =“modal” - ＆gt;将关闭那个modal = 这就是技巧!!!!
data-toggle =“modal” - ＆gt;将打开新对话框

享受！

Answer 2

您需要做的就是将代码中的确认模式标记放在代码中，而不是详细模式。

Answer 3

点击#deleteButton

时，只需隐藏#modal并显示#modal2

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

以下是一个有效的例子：http://jsfiddle.net/baptme/nuUzN/14/

Answer 4

如何将z-index添加到第二个模态？像：

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

如果值1050不起作用，请尝试更高的数字，即99999。

Answer 5

如果要在后面保留第一个模态，则必须做几件事。请注意，引导程序不支持它（使用引导程序4.5）。

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

<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;");

Twitter引导程序 - 在已打开的模式上打开模态

5 个答案: