极客观点
项目管理
HarmonyOS
我直接从 Bootstrap 示例中使用了我的模态代码，并且只包含了 bootstrap.js（而不是 bootstrap-modal.js）。但是，我的模态出现在灰色渐变（背景）下方并且不可编辑。
这是它的样子：
有关重现此问题的 一种 方法，请参 见此小提琴。该代码的基本结构如下：
<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;
}
任何想法为什么会这样或我能做些什么来解决这个问题？
原文由 natlines 发布，翻译遵循 CC BY-SA 4.0 许可协议
如果模态容器具有固定或相对位置，或者位于具有固定或相对位置的元素内，则会发生此行为。
确保模态容器及其所有父元素都以解决问题的默认方式定位。
这里有几种方法可以做到这一点：
最简单的方法是移动模态 div，使其位于任何具有特殊定位的元素之外。一个好地方可能就在结束正文标记
</body>之前。或者，您可以从 modal 及其祖先中删除
position:CSS 属性，直到问题消失。但是，这可能会改变页面的外观和功能。