Twitter引导 - 在已经打开的模式上打开模式。

Question

我的方案是这样的：我正在打开一个模态窗口，里面有一些记录的细节，我有一个 "删除 "按钮。当用户点击这个按钮时，我需要在现有的模态上面显示一个 "确认 "模态（问 "你确定吗？"），但是当这个确认模态显示时，它并没有挡住 "详细信息 "的第一个模态（后面）。

有谁知道我可以怎么做？

谢谢！我的情况是这样的

Answer 1

要做到这一点很容易。在你已经打开的模态中的链接必须像这样。

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

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

享受吧

Answer 2

您需要做的就是将确认模式的标记放在代码中比详情模式更低的位置。

Answer 3

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

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

这是一个工作实例。http:/jsfiddle.netbaptmenuUzN14

Answer 4

不如在第二个模态中加入一个z-index？比如

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

如果1050的值不行，就加个更高的数字，也就是9999。

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