Question

这是一个复制我正在解决的问题的傻瓜。

它的长短，我可以让背景出现，控制台显示模式被弹出到DOM上，但是不可见。不确定它是否应该弹出到不同的元素上，或者是否应该在某处手动设置可见性，但是我跟随示例代码并且无法使实际的模态对话框出现。

使用Angular-UI 0.6和Bootstrap 3.0样式（虽然我尝试过较旧的Bootstrap版本和多个角度版本）。

http://plnkr.co/edit/p23z5xnjQRmHu8MOfvcv?p=preview

Answer 1

所以，我已经成功完成了这项工作，从这里开始拼凑答案的各个部分：https://github.com/angular-ui/bootstrap/issues/722。诀窍在于，至少目前，angular-ui不支持开箱即用的Bootstrap 3.0。但是，它可以解决。 HTML需要包含在模态对话框和模态内容中，例如：

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">blah</div>
<div class="modal-body">blah</div>
<div class="modal-footer">blah</div>
</div>
</div>

然后你还需要在CSS中添加一些样式：

.modal {
  display: block;
}

.modal-body:before,
  .modal-body:after {
    display: table;
    content: " ";
}

.modal-header:before,
.modal-header:after {
  display: table;
  content: " ";
}

Answer 2

检查以下是工作演示

模型窗口在Angular-Bootstrap中工作

Working Demo

Answer 3

根据讨论here，有几个选项：

使用patched ui-bootstrap build和$ modal修复bootstrap3
使用bootstrap3支持构建您自己的ui-bootstrap发行版，目前托管在github上的bootstrap3_bis2分支中。
- $ git clone https://github.com/angular-ui/bootstrap.git ui-bootstrap3 && cd ui-bootstrap3
- $ git checkout bootstrap3_bis2
- $ npm install
- $ grunt
- 从dist文件夹中获取所需的.js文件

在后一种情况下，bootstrap3_bis2尚未集成在master上，因此你可以考虑在github上观看ui-bootstrap repo，这样你就可以在合并后立即跳回master。

Angular-Bootstrap，无法显示模态

3 个答案: