带有Bootstrap 3的Angular Dialog指令

Question

我们正在尝试从Bootstrap 2.3.2迁移到Bootstrap 3(RC1),并且遇到AngularJS Dialog指令的问题.单击相关按钮时,不会出现对话框弹出窗口(页面显示为黑色.单击任意位置返回到原始的非黑色视图).

我们基本上使用与上述链接完全相同的代码.

有讨论的一个已知的问题在这里.在那次讨论中,路德建议:

"要使模态工作,添加隐藏类以将display:none设置为modal并将模态的显示重置为block"

不幸的是,这似乎没有任何区别.我们可以使用哪些替代方法来使对话框出现在Bootstrap 3 RC1中？

我尝试过使用Modal指令.它有一个类似的问题,页面淡出(而不是完全黑色),弹出窗口也没有出现.

Answer 1

正如其他答案所述,这是由于Bootstrap 3中的重大变化.在Angular UI团队修复了这些问题(目前正在开发中,请参阅bootstrap3_bis分支)之前,有一个css解决方法,仅针对此博客文章中详述的对话框:

.modal { display: block; }

工作plunkr在这里:

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

Answer 2

您使用的示例代码适用于 Twitter Bootstrap 2.3.2。为什么您认为它也可以与 Twitter 的 Bootstrap 3 版本 3 一起使用？Twitter 的 Bootstrap 3 不向后兼容 Twitter 的 Bootstrap 2.x。您必须更改/迁移您的 HTML。因为您使用的是 Angular JS，所以您必须迁移模板。目前大部分工作似乎已经准备就绪，请参阅：https ://github.com/angular-ui/bootstrap/pull/742 。http://www.bootply.com/bootstrap-3-migration-guide将使您对必须进行的更改有一个印象。