有角度的條件模態背景

Question

我試圖在角度實現模態背景效果。我想在顯示完全覆蓋背景屏幕的某個模式對話框時出現純色，但我不希望所有模態都有此行爲（對於其他我不想要背景的模式）。

我已經添加了一些CSS中的頂級樣式表如下：

.modal-backdrop { 
background-color: #008000; 
opacity: 1.0 !important; 
} 

這工作，因爲它描繪了一個堅實的綠色背景，但它發生了我的系統上的所有情態動詞 - 我需要它發生僅適用於一種類型。我意識到「！important」指令可以防止任何CSS覆蓋，但是不會在背景頁面中提供不完全隱藏的結果（通過綠色可以看到）。

關於如何做到這一點的任何想法？

Answer 1

可以利用的uib-modal

$uibModal.open({ 
    ...other options 
    backdropClass: 'green-backdrop' 
}) 

然後backdropClass選項在你的CSS

.green-backdrop.modal-backdrop { 
    background-color: #008000; 
    opacity: 1.0 !important; 
} 

angular.module('test', ['ui.bootstrap']).controller('Test', Test); 
 

 
function Test($scope, $uibModal) { 
 
    $scope.normal = function() { 
 
    $uibModal.open({ 
 
     template: "<div>Hi, I'm normal modal</div>" 
 
    }); 
 
    } 
 
    
 
    $scope.green = function() { 
 
    $uibModal.open({ 
 
     template: "<div>Hi, I'm green modal</div>", 
 
     backdropClass: "green-backdrop" 
 
    }); 
 
    } 
 
}

.green-backdrop.modal-backdrop { 
 
    background-color: #008000; 
 
    opacity: 1.0 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div ng-app="test" ng-controller="Test"> 
 
    <button type="button" ng-click="normal()">normal</button> 
 
    <button type="button" ng-click="green()">green</button> 
 
</div>