Modem bootstrap-ui nie pokazuje szarego tła za nim, (klasa modal-backdrop nie jest dodawana na open)

Question

z jakiegoś powodu mój modal jest otwarty bez szarego tła, chociaż używam tego samego kodu, co na stronie: http://angular-ui.github.io/bootstrap/#/modal Jedyna różnica polega na tym, że użyłem szablonu z oddzielnego pliku html, a nie wewnątrz tagu <script>.

zauważyłem, że jej nie dodając ten kod: <div class="modal-backdrop fade in"></div> wewnątrz głównego pojemnika modalnej <div class="modal fade in">

Answer 1

stałej,
dodałem windowTemplateUrl do opcji $modal.open({..}) sprzeciw
który nadpisuje modalne okno główne: https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

, więc kod otwarty wygląda następująco:

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

i szablon przesłanianie teraz zmuszony obejmowały 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

dodać tę klasę do opcji w funkcji open: „backdropClass: 'modal-zasłona h-full' tak:

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

Answer 3

problemem jest to, że oryginalne tło ma wysokość 0px, aby naprawić dodać następujący styl:

Menu a Zaletą tego rozwiązania w stosunku do zaakceptowanego jest to, że nie tracisz odrzucania klikania na tle.

Jeśli nie lubisz kiedy zasłona oddalenie modalne dodać następujące $ modal.open:

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