Bootstrap模态出现在背景下 [英] Bootstrap modal appearing under background
问题描述
我使用的代码从我的模态直接从Bootstrap示例，并且只包括bootstrap.js（而不是bootstrap-modal.js）。但是，我的模态出现在灰色褪色（背景）下面，不可编辑。
以下是它的样子：
这个小提琴以一种方式重现这个问题。该代码的基本结构如下：
< body&
< p> Lorem ipsum dolor sit amet。< / p>
< div class =my-module>
此容器包含模态代码。
< div class =modal fade>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-body> Modal< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
body {
padding-top：50px;
}
.my-module {
position：fixed;
top：0;
left：0;
}
任何想法为什么这是或我可以做些什么来解决这个问题？ p>
如果模态容器有固定或相对位置，或者在固定或相对位置的元素内， p>
确保模式容器及其所有父元素位于修正此问题的默认方式。
这里有几种方法：
- 最简单的方法是移动模态div任何具有特殊定位的元素。一个好的地方可能是关闭body标签
< / body>之前。 - 或者，您可以删除
position：来自模态及其祖先的CSS属性，直到问题消失。但是，这可能会改变网页的外观和功能。
I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable.
Here's what it looks like:
See this fiddle for one way to reproduce this problem. The basic structure of that code is like this:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
Any ideas why this is or what I can do to fix this?
If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.
Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.
Here are a couple ways to do this:
- Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag
</body>. - Alternatively, you can remove
position:CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.
这篇关于Bootstrap模态出现在背景下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
