如何处理两个重叠的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-index？现在,模态背景是模态不可知的,并且没有模态特定的id/class.

或者是否有任何好的插件可以处理多个Twitter Bootstrap模式？

Answer 1

可能值得查看这个Bootstrap Modal插件.

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

......其中一个例子有"Stackable"模态,据我所知,你无法与新模态背后的旧模态进行交互; 也就是说,首先必须单击新模态的背景以使新模态消失并获得对旧模态的访问权限.(注意,该示例确实id为每个模态提供了不同的s.)

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