bootstrap-ui modal not showing the grey background behind it, (modal-backdrop class is not added on open)

Question

for some reason my modal is opened without the grey background although i'm using the same code as in there website : http://angular-ui.github.io/bootstrap/#/modal
the only difference is that i used a template from separated html file and not inside a <script> tag.

i noticed that its not adding this code: <div class="modal-backdrop fade in"></div> inside the main modal container <div class="modal fade in">

Solution 1

fixed,
i added windowTemplateUrl to the $modal.open({..}) options object
which overrides the modal main window : https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

so the open code looks like this:

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      windowTemplateUrl: 'modalWindowTemplte.html'
      ...
    });

and the override template now forced to included the div.modal-backdrop

<script type="text/ng-template" id="modalWindowTemplte.html">
        <div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}">
            <div class="modal-backdrop fade in"></div>
            <div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude></div></div>
        </div>
    </script>

Solution 2

The problem is that original backdrop has 0px height, to fix add the following style:

<style>
    .modal-backdrop {
        height: 100%;
    }
</style>

The advantage of this solution over accepted one is that you do not loose dismiss clicking on backdrop.

If you don't like when backdrop dismiss modal add the following to $modal.open:

$modal.open({
    ...
    backdrop: 'static',
    ...

Solution 3

add this class to options in open function: 'backdropClass : 'modal-backdrop h-full' like this:

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      backdropClass  : 'modal-backdrop h-full',
      ...
});