Question

我试图在角度中实现模态背景效果。当显示完全覆盖背景屏幕的某个模态对话框时，我希望显示纯色 - 但我不希望所有模态的此行为（对于其他我不想要的背景）。

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

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

这是因为它描绘了一个坚实的绿色背景，但它发生在我的系统上的所有模态 - 我需要它只发生一种类型。我意识到＆＃34;！important＆＃34;指令可以防止任何CSS覆盖，但不会在背景页面不完全隐藏的情况下提供此结果（可以看到绿色）。

关于如何做到这一点的任何想法？

Answer 1

您可以使用backdropClass

的uib-modal选项

$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>

角度

1 个答案: