如何处理两个重叠的 Twitter Bootstrap 模态

Question

我的页面上有一个标准的 Twitter Bootstrap 模式：

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Comments</h3>
  </div>
  <div class="modal-body">
    <p>Please provide a comment:</p>
    <textarea id="comment"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-primary">Save comment</a>
  </div>
</div>

现在，我正在通过 AJAX 保存评论并在成功保存时关闭模式。但是，我有一个全局 AJAX 错误处理程序，当任何 AJAX 调用遇到错误时（不仅仅是 cmets AJAX 调用），它本身会打开一个模式：

<div id="error-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Error</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
    </div>
</div>

模态体由错误处理程序填充，默认情况下，新模态放置在现有模态之上。但是，新模态的模态背景位于原始模态之后，仍然允许与之交互。

有没有办法为错误模式背景赋予不同的 z-index？目前，模态背景与模态无关，并且没有特定于模态的 id/类。

或者有什么好的插件可以处理多个 Twitter Bootstrap 模式？

Answer 1

这个Bootstrap Modal 插件可能值得一试。

在这里的演示中...
http://jschr.github.io/bootstrap-modal/

...其中一个示例具有“可堆叠”模态，据我所知，您无法与新模态背后的旧模态交互；即，您首先必须单击新模态的背景才能使新模态消失并访问旧模态。 （请注意，该示例确实为每个模式提供了不同的ids。）

顺便说一句，我曾考虑过使用这个插件，但我认为这篇文章的一部分提供了一个论点，即不使用模态框进行内联编辑：http://www.keepitslickstupid.com/ (from web.archive.org)（参见第 3 节，“模态对话框是如此 2002")

Answer 2

根据您的观点，这可能不是答案，但我会试一试：

不久前我遇到了同样的问题。我决定让 ajax 错误处理程序简单地将错误消息添加到已打开的模式之前，而不是打开另一个模式（如果没有，则首先打开一个空模式）。

这在编程方面更简单（不需要其他 hack 或插件），恕我直言 从用户的角度来看也是如此。有时少即是多。

我将选择哪种方法的决定权留给以后可能遇到此问题的人...

Answer 3

我就是这样解决的。我在引导箱的模式中显示来自 AJAX 调用的错误消息。它造成了混乱。所以这就是我对 z-indexes 所做的：

.bootbox.modal {
    z-index: 1070;
}

.bootbox.modal + .modal-backdrop {
    z-index: 1060;
}

这里发生的情况是背景的初始 z-index 是 1040，模态是 1050。由于 bootbox 在页面末尾添加了模态和背景，我给 bootbox 的 z-index 是 1070，所以它保持在绝对顶部，并使用 CSS 中的“+”选择器仅选择直接出现在 bootbox 之后的模态背景，并将其 z-index 更改为 1060。现在这与之前的模态重叠，允许焦点留在引导箱上。

如果您不使用 bootbox，我认为您可以为辅助模态分配一个自定义类，然后从那里开始工作。如果您有预定义的模态，我还没有看到模态背景如何叠加，但只需检查元素并相应地选择您的 CSS 选择器。

干杯