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。）

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

Answer 2

这是我解决它的方式。我在启动箱中的模式中启动的AJAX调用中显示错误消息。它造成了一团糟。所以这就是我对z-indexes做的事情：

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

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

这里发生的是背景的初始z-index是1040，模态是1050.当bootbox在页面末尾添加模态和背景时，我给bootbox一个1070的z-index，所以它保持绝对顶部，并使用＆＃34; +＆＃34; CSS中的选择器只选择直接在bootbox之后的模态背景，并将其z-index更改为1060.这现在与前一个模式重叠，允许焦点保留在bootbox上。

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

干杯

Answer 3

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

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

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

我决定采取哪种方法来挑选任何可能会遇到这种情况的人......

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

3 个答案: