角度UI模态指令,背景缺失

Question

当我使用UI Bootstrap http://angular-ui.github.io/bootstrap/中的modal指令时,我没有任何背景.模态本身正在发挥作用.

我尝试过使用ui-bootstrap-tpls.js(包含模板)和没有模板(手动下载).我将标记和css与示例中的标记进行了比较,但我找不到任何区别.一切都在那里.我以前用了好几次,这是我第一次遇到这个问题.这次的不同之处在于我正在使用sass版本的bootstrap.也许与它有关？我想出去的地方.

我的版本:

"angular": "1.2.24",
"angular-animate": "~1.2.24"
"angular-bootstrap": "~0.11.2",
"bootstrap-sass-official": "~3.3.1",

任何人的想法？

Answer 1

从Maxisam链接到pull请求:https://github.com/angular-ui/bootstrap/pull/3117

最简单的解决方法是添加以下CSS:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

.modal-backdrop {
  bottom: 0;
}

希望它不会破坏你的代码:-)

Answer 2

你可以做一个解决方法

1-添加此css类:

.modal-backdrop{
bottom: 0;
position: fixed;
}

2-确保"window.html"模板文件包含"ng-click"事件

<div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)">
    <div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude></div></div>
</div>

Answer 3

正如angular-ui上的文档指出的那样.它支持Bootstrap 3.1.1.因此解决方案是降级.