我已经直接从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
在附加到主体时要小心!
这肯定会从背景后面得到那个模态:
$('#myModal').appendTo("body").modal('show');
然而，这将在每次打开主体时添加另一个模态，这可能会导致在更新面板中添加具有编辑和更新的网格视图等控件到模态时头痛。因此，你可以考虑在模式关闭时删除它:
例如:
$(document).on('hidden.bs.modal', function () {
$('.modal').remove();
});
将删除添加的模态。(当然，这是一个例子，你可能想要使用另一个你添加到模态的类名)。
正如其他人已经说过的;你可以简单地从模式中关闭back-drop (data- background ="false")，或者如果你不能没有屏幕变暗，你可以调整.modal- backstage CSS类(或者增加z-index)。
