twitter-bootstrap Bootstrap 3 的 Angular Dialog 指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18150629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Dialog directives with Bootstrap 3
提问by KEB
We're trying to migrate from Bootstrap 2.3.2 to Bootstrap 3 (RC1) and are having problems with the AngularJS Dialog directive. On clicking the relevant button no dialogue popup appears (the page appears black. Clicking anywhere returns to the original non-black view).
我们正在尝试从 Bootstrap 2.3.2 迁移到 Bootstrap 3 (RC1)，但在使用AngularJS Dialog 指令时遇到了问题。单击相关按钮时不会出现对话框弹出窗口（页面显示为黑色。单击任意位置返回原始非黑色视图）。
We're essentially using exactly the same code as in the above link.
我们基本上使用与上述链接完全相同的代码。
There is a known issue discussed here. In that discussion Luther suggests:
有讨论的一个已知的问题在这里。在那次讨论中，路德建议：
"to have modal worked, add hide class to set display:none to modal and reset the modal's display to block"
“要使模态工作，请添加隐藏类以将 display:none 设置为模态并将模态的显示重置为阻止”
That unfortunately doesn't seem to make any difference. What alternatives could we use to get the dialogs appearing in Bootstrap 3 RC1?
不幸的是，这似乎没有任何区别。我们可以使用哪些替代方法来使 Bootstrap 3 RC1 中出现对话框？
I've tried using the Modal directive instead. It has a similar problem where the page fades (rather than goes completely black) and the popup also doesn't appear.
我试过使用Modal 指令代替。它有一个类似的问题，即页面褪色（而不是完全变黑）并且弹出窗口也没有出现。
回答by embee
As the other answers have stated, this is due to breaking changes in Bootstrap 3. Until the Angular UI team have fixed these issues (currently under development, see the bootstrap3_bis branch) there is a css workaround just for dialog boxes detailed in this blog post:
正如其他答案所述，这是由于 Bootstrap 3 中的重大更改。在 Angular UI 团队解决这些问题之前（目前正在开发中，请参阅 bootstrap3_bis 分支）有一个仅针对此博客文章中详述的对话框的 css 解决方法：
.modal { display: block; }
Working plunkr is available here:
工作 plunkr 可在此处获得：
回答by Jonathan Moffatt
There's a pull request pending that contains fixes for most of the issues with Bootstrap 3.0 and the AngularUi directives, including the issues with the dialogs (which were certainly the most frustrating ones for me!):
有一个拉取请求待处理，其中包含对 Bootstrap 3.0 和 AngularUi 指令的大多数问题的修复，包括对话框问题（这对我来说当然是最令人沮丧的问题！）：
https://github.com/angular-ui/bootstrap/pull/742
https://github.com/angular-ui/bootstrap/pull/742
(See Bootstrap 3 compatible with current AngularJS bootstrap directives?)
回答by Bass Jobsen
The example code you use works with Twitter Bootstrap 2.3.2. Why do you expect it should work with version 3 of Twitter's Bootstrap 3 too? Twitter's Bootstrap 3 is not backwards compatible with Twitter's Bootstrap 2.x. You will have to change / migrate your HTML. Cause you're using Angular JS, you will have to migrate your templates. Most of the works seems ready at the moment, see: https://github.com/angular-ui/bootstrap/pull/742. http://www.bootply.com/bootstrap-3-migration-guidewill give you a impression of the changes you will have to make.
您使用的示例代码适用于 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会给你一个你必须做出的改变的印象。
