jquery - 如何处理两个重叠的 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 调用遇到错误时，它本身会打开一个模式(不仅仅是评论 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 索引？目前，模态背景与模态无关，并且没有模态特定的 ID/类。

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

Answer 1

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

在此处的演示中...
http://jschr.github.io/bootstrap-modal/

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

顺便说一句，我曾经考虑过使用这个插件，但我认为这篇文章在一定程度上提供了不使用模态进行内联编辑的论点:http://www.keepitslickstupid.com/ (from web.archive.org) (参见第 3 节“2002 年的模式对话框”)