Question

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

我尝试过使用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的拉取请求链接：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。因此解决方案是降级。

Answer 4

可悲的是，指定bottom:0;的答案并不完全正确 - 在某些情况下会发生（对于ui-view路由器尤其如此），背景下方还有一些空白空间。所以，我建议只添加以下代码：

.modal-backdrop {
    bottom: -100%;
}

由于背景被添加到身体水平，它不应该破坏任何东西，绝对保证不会在背景下留下任何未覆盖的空间。

Answer 5

试试这个PR

Plunker

基本上你只需要在指令中添加一行＆＃39; modalWindow＆＃39;

angular.element($document[0].querySelectorAll('div.modal-backdrop')).css('height',element[0].scrollHeight + 'px');

并注入 $ document

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

5 个答案: