Bootstrap-ui modal does not show a gray background behind it (modal background class is not added when opened)

Question

for some reason my modal opens without a gray background, although I use the same code as on the website: http://angular-ui.imtqy.com/bootstrap/#/modal <w> The only difference is that I used a template from a split html file, and not inside the <script> .

I noticed that he does not add this code: <div class="modal-backdrop fade in"></div> inside the main modal container <div class="modal fade in">

Answer 1

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

so open source looks like this:

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

and the override pattern is now forced to include 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> 

Answer 2

The problem is that the source background is 0px high to fix adding the following style:

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

The advantage of this decision over the accepted one is that you do not lose clicking on the background.

If you don't like it when the fold rejects the modal, add the following to $ modal.open:

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

Answer 3

add this class to the parameters in the open function: 'backdropClass:' modal-backdrop h-full 'for example:

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