twitter-bootstrap 如何处理两个重叠的 Twitter Bootstrap Modals
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16800216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Handle Two Overlapping Twitter Bootstrap Modals
提问by Steve
I have a standard Twitter Bootstrap modal on my page:
我的页面上有一个标准的 Twitter Bootstrap 模式：
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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>
Now, I am saving the comment via AJAX and close the modal when a successful save happens. However, I have a global AJAX error handler, which itself opens a modal when any AJAX calls encounter an error (not just for the comments AJAX call):
现在，我通过 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>
The modal-body is filled in by the error handler and, by default, the new modal is placed on top of the existing modal. However, the modal backdrop for the new modal is behind the original modal, which still allows for interaction with it.
模态体由错误处理程序填充，默认情况下，新模态放置在现有模态的顶部。但是，新模态的模态背景位于原始模态的后面，这仍然允许与其交互。
Is there a way to give the error modal backdrop a different z-index? Right now, the modal backdrop is modal agnostic and doesn't have a modal specific id/class.
有没有办法给错误模态背景一个不同的 z-index？现在，模态背景是模态不可知的，并且没有模态特定的 id/class。
Or are there any good plugins that deal with multiple Twitter Bootstrap modals?
或者有没有处理多个 Twitter Bootstrap 模态的好插件？
采纳答案by mg1075
It might be worth checking out this Bootstrap Modalplugin.
可能值得一试这个Bootstrap Modal插件。
In the demo here...
http://jschr.github.io/bootstrap-modal/
在演示中...
http://jschr.github.io/bootstrap-modal/
...one of the examples has "Stackable" modals, and as far as I can tell, you are not able to interact with the old modal behind the new modal; i.e., you first have to click the background of the new modal to make the new modal go away and gain access to the old modal. (Note the example does give different ids to each modal.)
...其中一个示例具有“可堆叠”模态，据我所知，您无法与新模态背后的旧模态进行交互；即，您首先必须单击新模态的背景以使新模态消失并访问旧模态。（请注意，该示例确实id为每个模态提供了不同的s。）
As an aside, I considered using this plugin at one point, but I think in part this article provided an argument for not using modals for inline editing: http://www.keepitslickstupid.com/ (from web.archive.org)(see section 3, "Modal dialogs are so 2002")
顺便说一句，我曾经考虑过使用这个插件，但我认为这篇文章在某种程度上提供了一个不使用模态进行内联编辑的论据：http://www.keepitslickstupid.com/（来自 web.archive.org）（见第 3 节，“模态对话框是如此 2002”）
回答by salmanhijazi
This is how I tackled it. I was showing error messages from an AJAX call started within the modal in a bootbox. It caused a mess. So here's what I did to the z-indexes:
我就是这样解决的。我正在显示来自引导箱模式中启动的 AJAX 调用的错误消息。它造成了混乱。所以这是我对 z-indexes 所做的：
.bootbox.modal {
z-index: 1070;
}
.bootbox.modal + .modal-backdrop {
z-index: 1060;
}
What happens here is that the initial z-index for the backdrop is 1040 and the modal is 1050. As bootbox adds a modal and backdrop at the end of the page, I gave the bootbox a z-index of 1070, so it stays on the absolute top, and used the "+" selector in CSS to only select the modal-backdrop that comes directly after the bootbox, and changed its z-index to 1060. This now overlaps the previous modal, allowing the focus to remain on the bootbox.
这里发生的情况是背景的初始 z-index 是 1040，模态是 1050。当 bootbox 在页面末尾添加模态和背景时，我给 bootbox 的 z-index 为 1070，所以它保持打开状态绝对顶部，并使用 CSS 中的“+”选择器只选择直接出现在 bootbox 之后的 modal-backdrop，并将其 z-index 更改为 1060。这现在与之前的 modal 重叠，允许焦点停留在引导箱。
If you're not using bootbox, I think you can assign a custom class to the secondary modal and work your way from there. I haven't seen how the modal backdrops stack up if you have predefined modals, but just inspect the elements and choose your CSS selector accordingly.
如果您不使用 bootbox，我认为您可以将自定义类分配给辅助模式并从那里开始工作。如果您有预定义的模态，我还没有看到模态背景如何叠加，但只需检查元素并相应地选择您的 CSS 选择器。
Cheers
干杯
回答by kralyk
This might be a non-answer depending on your perspective, but I'll give it a go:
根据您的观点，这可能不是答案，但我会试一试：
I faced the very same problem a while ago. Instead of opening another modal, I decided to have the ajax error handler simply prepend the error message to the already opened modal (if there is none, an empty modal is first opened).
不久前我遇到了同样的问题。我没有打开另一个模态，而是决定让 ajax 错误处理程序简单地将错误消息添加到已经打开的模态（如果没有，首先打开一个空的模态）。
This is simpler in terms of programming (no other hack or plugin required) and IMHOalso from user's perspective. Sometimes less is more.
这在编程方面更简单（不需要其他黑客或插件），恕我直言，从用户的角度来看也是如此。有时少即是多。
I leave the decision as to which approach to pick to whoever might come across this in the furure...
我将选择哪种方法的决定留给可能在未来遇到这种情况的人......
