模態窗口具有大背景

Question

我在其中一個視圖上使用了iu.bootstrap.modal彈出窗口。模式窗口正確顯示，除了它看起來像在一個較大的白色框內。

是什麼導致這個白色框架出現在我的模態窗口後面？

這是我的觀點：

<button type="button" id="btnModal" name="modal1" ng-click="openModal()" class="btn btn-primary pull-right">Open Modal</button> 

<!--Modal--> 
<script type="text/ng-template" id="myModal.html"> 
<div class="modal-content"> 
<div class="modal-header"> 
    <h3 class="modal-title">{{title}}</h3> 
</div> 
<div class="modal-body"> 
    <span id="error-message" class="text-danger" style="white-space:pre">{{message}}</span> 
</div> 
<div class="modal-footer"> 
    <button id="btn-ok" class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
</div> 
</div>  
</script> 

我的控制器

$scope.openModal = function() { 
    var title = "Modal Title"; 
    var message = "Modal Message"; 

    var modalInstance = $uibModal.open ({ 
     animation: true, 
     templateUrl: 'myModal.html', 
     size: 'sm', 
     controller: function ($scope) { 
     $scope.title = title; 
     $scope.message = message; 
     $scope.ok = function() { modalInstance.dismiss() }; 
    } 
    }); 
}; 

是什麼原因導致出現的模式背後的窗口？

Answer 1

在ui.bootstrap文檔（https://angular-ui.github.io/bootstrap/#/modal）

<script type="text/ng-template" id="myModalContent.html"> 
     <div class="modal-header"> 
      <h3 class="modal-title" id="modal-title">I'm a modal!</h3> 
     </div> 
     <div class="modal-body" id="modal-body"> 
      <ul> 
       <li ng-repeat="item in $ctrl.items"> 
        <a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a> 
       </li> 
      </ul> 
      Selected: <b>{{ $ctrl.selected.item }}</b> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button> 
      <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button> 
     </div> 
    </script> 

沒有一個modal-content類的<div>。但是你在模態的開始。 modal-content是一個css Bootstrap類，它可能會導致問題。