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-bootstrap-tpls.js (template included) and without templates (downloading them manually). I compared the the markup and the css with the one from the example and I can't find any difference. Everything is there. I've used it several times before and this is the first time I encounter this issue. The difference this time is that I'm using the sass version of bootstrap. Maybe has something to do with it? I'm out of ideas where to look.

My versions:

"angular": "1.2.24",
"angular-animate": "~1.2.24"
"angular-bootstrap": "~0.11.2",
"bootstrap-sass-official": "~3.3.1",

Any ideas anyone?

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

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

Answer 4

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.