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


我的页面上有一个标准的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模式?


6749
2018-05-28 19:46


起源



答案:


这可能值得一试 Bootstrap模态 插入。

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

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

顺便说一句,我考虑过一次使用这个插件,但我认为这篇文章部分提供了一个不使用模态的论据 内联编辑http://www.keepitslickstupid.com/3-essential-ux-ideas/  (参见第3节“模态对话框如此2002”)


8
2018-05-29 12:44



嗨,我也想打开其他重叠的模态框。我可以做到这一点,但能够点击下模态框。我正在使用bootstrap 2.3.1 - priyanka patel
第二个链接不再可用 - beauXjames
@beauXjames - re:“3-essential-ux-ideas”链接...此处存档版本: web.archive.org/web/20141221125725/http://... - mg1075
thx,但我只是指出它...存档的版本是不完整的(通常图像没有得到与文本内容相同的处理)...我建议只是注意或删除上面的链接...我敢肯定还有很多其他文章降低了模态的使用 - beauXjames


答案:


这可能值得一试 Bootstrap模态 插入。

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

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

顺便说一句,我考虑过一次使用这个插件,但我认为这篇文章部分提供了一个不使用模态的论据 内联编辑http://www.keepitslickstupid.com/3-essential-ux-ideas/  (参见第3节“模态对话框如此2002”)


8
2018-05-29 12:44



嗨,我也想打开其他重叠的模态框。我可以做到这一点,但能够点击下模态框。我正在使用bootstrap 2.3.1 - priyanka patel
第二个链接不再可用 - beauXjames
@beauXjames - re:“3-essential-ux-ideas”链接...此处存档版本: web.archive.org/web/20141221125725/http://... - mg1075
thx,但我只是指出它...存档的版本是不完整的(通常图像没有得到与文本内容相同的处理)...我建议只是注意或删除上面的链接...我敢肯定还有很多其他文章降低了模态的使用 - beauXjames


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

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

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

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

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

干杯


3
2018-05-16 01:06



好的解决方案当一个bootstrap模式对话框打开时,它使用bootbox.alert解决了我的问题。 - Leopoldo Sanczyk


根据你的观点,这可能是一个非答案,但我会试一试:

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

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

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


1
2017-07-29 15:36