CODEWITHSUNDEEP
cssangularjstwitter-bootstrapbootstrap-modal
bzo
bzo

Reputation: 1624

Conditional modal backdrop in angular

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?

Upvotes: 1

Views: 11296

Answers (1)

Icycool
Icycool

Reputation: 7179

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>

Upvotes: 1

Related Questions