在背后的Bootstrap Modal开会 [英] Bootstrap Modal sitting behind backdrop
问题描述
因此，我遇到的问题与 @Jamescoo 但我认为我的问题是由于我已经定位了几个DIV来创建一个滑动导航面板的事实。
So I'm having nearly the exact same problem as @Jamescoo was but I think that my issue is coming from the fact that I have already positioned a couple of DIVs to create a sliding nav panel.
这是我的确切的安装复制： http://jsfiddle.net/ZBQ8U/2/
Here's my exact setup replicated: http://jsfiddle.net/ZBQ8U/2/
Z-index不应该冲突
The z-indexes shouldn't conflict and their values would show that they are stacking correctly, but visually they are not.
点击打开模式按钮后，会出现< div class =modal-backdrop fade in>< / div> 涵盖一切！ （你必须重新运行代码重置它）
Once you click the 'Open Modal' button the <div class="modal-backdrop fade in"></div> covers everything! (you'll have to re-run the code to reset it)
我不知道如何补救这个...任何想法？
I don't know quite how to remedy this one...Any ideas?
推荐答案
只需将整个模态移到代码的其余部分之外即可。它不需要嵌套在除了正文之外的任何其他元素中。
Just move the entire modal outside of the rest of your code, to the very bottom. It doesn't need to be nested in any other element, other than the body.
<body>
<!-- All other HTML -->
<div>
...
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
...
</div>
</body>
他们在文档中提到此解决方案。
They hint at this solution in the documentation.
模式标记放置
始终尝试将模态的HTML代码放置在文档的顶级位置，以避免其他组件模态的外观和/或功能。
Modal Markup Placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
这篇关于在背后的Bootstrap Modal开会的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
