Conditional modal backdrop in angular - css

Question

I'm trying to implement a modal backdrop effect in angular. I'd like to have a solid color appear when a certain modal dialog is shown that completely overlays the background screen - but I don't want this behavior for all modals (for others I don't want a backdrop).
I've added some CSS in a top level stylesheet as follows:
.modal-backdrop {
background-color: #008000;
opacity: 1.0 !important;
}
This works in that it paints a solid green background but it happens for ALL modals on my system - I need it to happen for one type only. I realise the "!important" directive prevents any CSS override, but not supplying this results in the background page not being totally hidden (it can be seen though the green color).
Any ideas on how this could be done?

Answer 1

You can utilize the backdropClass option of uib-modal
$uibModal.open({
...other options
backdropClass: 'green-backdrop'
})
Then in your 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>