css - Angular 条件模态背景

Question

我正在尝试以 Angular 实现模态背景效果。当显示完全覆盖背景屏幕的某个模态对话框时，我希望出现纯色 - 但我不希望所有模态都有这种行为(对于其他我不想要背景)。

我在顶级样式表中添加了一些 CSS，如下所示:

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

它的工作原理是它绘制了纯绿色背景，但它发生在我系统上的所有模态上——我只需要它发生在一种类型上。我意识到“!important”指令会阻止任何 CSS 覆盖，但不提供此指令会导致后台页面未完全隐藏(通过绿色可以看到)。

关于如何做到这一点有什么想法吗？

Answer 1

您可以使用 uib-modal 的 backdropClass 选项

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

然后在你的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>