Angular UI modal directive, backdrop missing

Question

I have no backdrop when using the modal directive from UI Bootstrap http://angular-ui.github.io/bootstrap/. The modal itself is working.

I have tried with both the ui-b

Answer 1

from Maxisam's link to the pull request: https://github.com/angular-ui/bootstrap/pull/3117

the easiest fix is simply to add the following CSS:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

.modal-backdrop {
  bottom: 0;
}

Hopefully it won't break your code :-)

Answer 2

There is a workaround you can do

1- add this css class:

.modal-backdrop{
bottom: 0;
position: fixed;
}

2- make sure the "window.html" template file included "ng-click" event

<div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)">
    <div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude></div></div>
</div>

Answer 3

Sadly, the answer, where bottom:0; is specified is not entirely correct - in some cases it happens (and that's especially true for ui-view router), that there is some empty space left below the backdrop. So, I would suggest just adding the following code:

.modal-backdrop {
    bottom: -100%;
}

As the backdrop is added to the body level, it should not break anything and is absolutely guaranteed not to leave any uncovered space below the backdrop.

Answer 4

Try this PR

Plunker

Basically you just need to add one line in directive 'modalWindow'

angular.element($document[0].querySelectorAll('div.modal-backdrop')).css('height',element[0].scrollHeight + 'px');

and inject $document

Answer 5

As the docs on angular-ui points out. It supports Bootstrap 3.1.1. So the solution was to downgrade.