Search code examples
cssangularjsmodal-dialogangular-ui-bootstrapangular-bootstrap

Getting angular-bootstrap modal working with angular-1.3

Has anyone had any luck getting angular-bootstrap modals working in angular-1.3.x?

My modals work completely fine in angular-1.2.x. However when I upgrade to angular-1.3.11 the modals don't appear.

When I click the button that opens the modal, the scrollbars dissapear like the modal is open. When I highlight over where the modal would be, my mouse cursor changes like it's over the modal (I have draggable elements inside the modal). If I click the modal, it appears normally.

Simply put, the modal is there, it's just invisible with angular-1.3.11 until I click it. After which, the modal functions completely normally.

I would like to use angular-1.3.x since they've implemented the whole bind-once thing.

To me it seems like it's a styles related issue. I'm not sure why the difference in angular versions would cause this though. If I revert back to 1.2.x, they display fine again.

I know angular-bootstrap doesn't support angular-1.3.x yet, but considering the functionality still works, it seems like a small, do-able fix. I just can't figure out how to fix it. Any help would be appreciated.

Solution

  • $modal works with angular-1.3.x (tested with 1.3.11) by over-riding bootstraps css for opacity and transforms. This is what got it working:

    .modal.fade {
  opacity: 1;
}

.modal.fade .modal-dialog, .modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

    Hope this helps anybody else trying to use angular-bootstrap-0.12.0 with angular-1.3.x