在另一个前面打开模态答案

【问题标题】：Open Modal in front of Another在另一个前面打开模态
【发布时间】：2017-12-05 14:53:08
【问题描述】：

快速提问（希望如此？）。我有一个模态（单击按钮并弹出事物/内容）- 在模态中我有文本，我想让某人单击它，它会在前面打开另一个模态。

初始模态是：

<button class="btn btn-two shortcode-popup-trigger" data-toggle="modal" data-target="#modal-group-5">MORE INFO</button>

然后在里面我使用了完全相同的行，但将模态 ID 更改为我想打开的另一个模态。这有效，除了新模式在当前模式后面打开。有人能帮我解决这个问题吗？我很感激！

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这是同一个模态模块，所以猜测.modal 的 z-index 对于两个模态都是相同的。为什么不为每个模态尝试不同的z-indexes？

#modal-group-4 {
    z-index: 400;
}

#modal-group-5 {
    z-index: 500;
}

如果这不起作用。然后您可以尝试关闭第一个模态，然后在第二个模态关闭时将其显示回来。像这样的，

关闭第一个模式：

<button class="btn btn-two shortcode-popup-trigger" data-toggle="modal" data-target="#modal-group-5" onclick="jQuery('#modal-group-4').modal('toggle');">MORE INFO</button>

要重新打开第一个模态，我们需要监听第二个模态的关闭事件，

$('#modal-group-5').on('hidden.bs.modal', function () {
    jQuery('#modal-group-4').modal('toggle');
})

注意：上述方法仅在 Bootstrap 3 中支持。对于较低版本，请使用此

$('#modal-group-5').on('hidden', function () {
    jQuery('#modal-group-4').modal('toggle');
})

Method # 2 Source

【讨论】：

【解决方案2】：

在您的“Html”页面中，确保您的“modal-group-4”模式位于“modal-group-5”之上。如果您的 modal-group-5 高于 modal-4，则 modal-group-5 将排在 modal-group-4 之后。

试试看。

【讨论】：