Angular-Bootstrap，无法显示模态

Question

Here's a plunker that replicates the issue I'm having.

Long and short of it, I can get the backdrop to appear, and the console shows the modal being popped onto the DOM, but isn't visible. Not sure if it's supposed to be popped onto a different element or if the visibility is supposed to be set manually somewhere, but I'm following along with the example code and can't make the actual modal dialog appear.

Using Angular-UI 0.6 with Bootstrap 3.0 styles (though I've tried the older Bootstrap versions and multiple angular versions).

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

Answer 1

So, I've managed to make this work, cobbling together various parts of an answer from here: https://github.com/angular-ui/bootstrap/issues/722 . The trick is that, at least currently, angular-ui doesn't support Bootstrap 3.0 out of the box. However, it can be worked around. The HTML needs to be wrapped in a modal-dialog and modal-content, eg:

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

Then you also need to add some styles to your CSS:

.modal {
  display: block;
}

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

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

Answer 2

Check below is the working Demo

Model Window Working in Angular-Bootstrap

Working Demo

Answer 3

Based on a discussion here , there are a couple of options:

• use patched ui-bootstrap build with $modal fix for bootstrap3
• build your own ui-bootstrap distribution with bootstrap3 support, currently hosted in bootstrap3_bis2 branch on github.
  • $ git clone https://github.com/angular-ui/bootstrap.git ui-bootstrap3 && cd ui-bootstrap3
  • $ git checkout bootstrap3_bis2
  • $ npm install
  • $ grunt
  • grab needed .js files from dist folder

In the latter case, bootstrap3_bis2 is not yet integrated on master, so you might consider watching ui-bootstrap repo on github, so you could jump back to master as soon as it gets merged in.