Angularjs – Angular-Bootstrap, Can’t get modal to appear

angular-uiangularjs

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

Best Answer

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, e.g.: 

<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: " ";
}
Related Topic