24

Here's my scenario: I'm opening a modal window with some record details, and I've a "Delete" button. When user clicks on this button, I need to show a "confirmation" modal above/over the existing modal (asking "are you sure?"), but when this confirmation modal is showed, it doesn't block the "details" first modal (behind).

Does anyone know how can I do it?

Thanks!

4

5 回答 5

18

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

于 2015-02-12T17:46:52.523 回答
17

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

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

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

享受！

于 2013-05-23T23:12:16.563 回答
8

单击#deleteButton 时只需隐藏#modal 并显示#modal2

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

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

于 2012-06-11T16:35:50.973 回答
6

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

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

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

于 2015-06-19T13:13:13.453 回答
0

如果你想将第一个模态保留在后面，你必须做几件事。请注意，引导程序不支持它（使用引导程序 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;");
于 2020-06-17T14:52:25.547 回答