角度条件模态背景

Question

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

我在顶级样式表中添加了一些 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>