6

这是一个复制我遇到的问题的plunker。

总而言之，我可以让背景出现，控制台显示模态被弹出到 DOM 上，但不可见。不确定是否应该将其弹出到不同的元素上，或者是否应该在某处手动设置可见性，但我正在遵循示例代码并且无法显示实际的模态对话框。

将 Angular-UI 0.6 与 Bootstrap 3.0 样式一起使用（尽管我尝试过旧的 Bootstrap 版本和多个 Angular 版本）。

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

4

3 回答 3

13

因此，我设法完成了这项工作，将这里的答案的各个部分拼凑在一起：https ://github.com/angular-ui/bootstrap/issues/722 。诀窍是，至少目前，angular-ui 不支持开箱即用的 Bootstrap 3.0。但是，它可以解决。HTML 需要包含在 modal-dialog 和 modal-content 中，例如：

<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: " ";
}
于 2013-09-19T14:46:56.013 回答
1

检查下面是工作演示

在 Angular-Bootstrap 中工作的模型窗口

Working Demo

于 2013-09-19T13:13:37.673 回答
0

根据此处的讨论，有两种选择：

  • 使用修补后的 ui-bootstrap 构建和 $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。

于 2013-11-06T09:29:07.433 回答