13

我的页面上有一个标准的 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 调用遇到错误时，它本身会打开一个模式（不仅仅是评论 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>

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

有没有办法给错误模式背景一个不同的z-index？现在，模态背景与模态无关，并且没有特定于模态的 id/类。

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

4

3 回答 3

9

看看这个Bootstrap Modal插件可能是值得的。

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

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

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

于 2013-05-29T12:44:14.503 回答
4

这就是我解决它的方法。我在引导箱的模式中显示来自 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 之后的 modal-backdrop，并将其 z-index 更改为 1060。这现在与之前的 modal 重叠，允许焦点保持在引导箱。

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

干杯

于 2015-05-16T01:06:11.757 回答
1

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

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

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

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

于 2014-07-29T15:36:05.213 回答