我已经直接从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;
}
你知道为什么会这样吗或者我能做些什么来弥补吗?
删除模式背景背景设置为黑色在你的引导CSS
我看到:
.modal-backdrop {
position: fixed; /*---- commented and it shows */
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
/*background-color: #000000; */
}
然后添加这个背景色和o.5的不透明度。我看到:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.5;
}
注意:虽然这些变化是在boostrap css中做出的，但我使用了angular-strap，我没有下载或使用ng-animate css
解决办法是把模态直接放在body标签下面。如果由于某些原因这是不可能的，那么只需添加一个overflow: visible属性到包含模态的标记中，或使用以下代码:
<script>
$(document).on('show.bs.modal', '.modal', function () {
$('.div-wrapper-for-modal').css('overflow', 'visible');
});
$(document).on('hide.bs.modal', '.modal', function () {
$('.div-wrapper-for-modal').css('overflow', 'auto');
});
</script>
<div class="div-wrapper-for-modal">
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
我找到的最简单的解决方案，对我所有的案例都有效，就是在类似的帖子中回答:
下面就是:
.modal {
background: rgba(0, 0, 0, 0.5);
}
.modal-backdrop {
display: none;
}
基本上，原来的背景没有使用。相反，你使用情态动词作为背景。结果是它的外观和行为与原始版本完全一致。它避免了z索引的所有问题(对我来说，将z索引改为0解决了这个问题，但创建了一个新的问题，我的导航菜单介于模式和背景之间)，而且很简单。
感谢@Jevin O. Sewaruth发布的原始答案。
