bootstrap-ui phương thức không hiển thị nền màu xám phía sau, (lớp modal không được thêm vào mở)

Question

vì một số lý do phương thức của tôi được mở mà không có nền màu xám mặc dù tôi đang sử dụng cùng một mã như trong trang web đó: http://angular-ui.github.io/bootstrap/#/modal
khác biệt duy nhất là tôi đã sử dụng mẫu từ tệp html được tách riêng và không nằm trong thẻ <script>.

tôi nhận thấy rằng nó không thêm mã này: <div class="modal-backdrop fade in"></div> bên trong container modal chính <div class="modal fade in">

Answer 1

cố định,
i thêm windowTemplateUrl đến $modal.open({..}) lựa chọn đối tượng
mà đè cửa sổ chính modal: https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

để mã mở trông như sau:

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

và template override nay buộc phải bao gồm các 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

thêm lớp này để lựa chọn chức năng mở: 'backdropClass: 'modal-bối cảnh h-đầy đủ' như thế này:

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

Answer 3

Vấn đề là phông nền ban đầu có chiều cao 0px, để sửa thêm kiểu sau:

dvantage của giải pháp này trên chấp nhận một là bạn không loại bỏ lỏng lẻo cách nhấp vào phông nền.

Nếu bạn không thích khi bối cảnh sa thải modal thêm dòng sau vào $ modal.open:

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