twitter-bootstrap bootstrap-ui modal 未显示其背后的灰色背景，（打开时未添加modal-backdrop 类）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28520267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap-ui modal not showing the grey background behind it, (modal-backdrop class is not added on open)
提问by Haitham Zoabi
for some reason my modal is opened without the grey background although i'm using the same code as in there website : http://angular-ui.github.io/bootstrap/#/modal
the only difference is that i used a template from separated html file and not inside a <script>tag.
出于某种原因，我的模态打开时没有灰色背景，尽管我使用的代码与那里的网站相同：http: //angular-ui.github.io/bootstrap/#/modal
唯一的区别是我使用了模板来自分离的 html 文件而不是<script>标签内。
i noticed that its not adding this code: <div class="modal-backdrop fade in"></div>inside the main modal container <div class="modal fade in">
我注意到它没有添加此代码：<div class="modal-backdrop fade in"></div>在主模态容器内<div class="modal fade in">
采纳答案by Haitham Zoabi
fixed,
i added windowTemplateUrlto the $modal.open({..})options object
which overrides the modal main window : https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html
固定，
我添加windowTemplateUrl到
覆盖模态主窗口的$modal.open({..})选项对象
：https: //github.com/angular-ui/bootstrap/blob/master/template/modal/window.html
so the open code looks like this:
所以打开的代码是这样的：
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
windowTemplateUrl: 'modalWindowTemplte.html'
...
});
and the override template now forced to included the div.modal-backdrop
并且覆盖模板现在被迫包含 div.modal-backdrop
<script type="text/ng-template" id="modalWindowTemplte.html">
<div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}">
<div class="modal-backdrop fade in"></div>
<div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude></div></div>
</div>
</script>
回答by Skarllot
The problem is that original backdrop has 0px height, to fix add the following style:
问题是原始背景的高度为 0px，要修复添加以下样式：
<style>
.modal-backdrop {
height: 100%;
}
</style>
The advantage of this solution over accepted one is that you do not loose dismiss clicking on backdrop.
与公认的解决方案相比，此解决方案的优势在于您不会松散点击背景。
If you don't like when backdrop dismiss modal add the following to $modal.open:
如果您不喜欢背景关闭模式时，请将以下内容添加到 $modal.open：
$modal.open({
...
backdrop: 'static',
...
回答by Jose Gustavo
add this class to options in open function: 'backdropClass : 'modal-backdrop h-full' like this:
将此类添加到 open 函数中的选项： 'backdropClass : 'modal-backdrop h-full' 像这样：
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
backdropClass : 'modal-backdrop h-full',
...
});
