Angular Dialog directives with Bootstrap 3

Question

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).

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"

That unfortunately doesn't seem to make any difference. What alternatives could we use to get the dialogs appearing in 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.

Answer 1

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:

.modal { display: block; }

Working plunkr is available here:

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

Answer 2

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!):

https://github.com/angular-ui/bootstrap/pull/742

(See Bootstrap 3 compatible with current AngularJS bootstrap directives?)