angularjs - 有没有办法在 mddialog 中更改外部区域的颜色？

Question

你好，我正在尝试将一个简单的 md 对话框外部区域的颜色从深色透明颜色更改为不同的颜色，它可以更暗或更亮，这可能吗？感谢您的帮助!

代码来自 https://material.angularjs.org/latest/demo/dialog :

$scope.showAlert = function(ev) {
    // Appending dialog to document.body to cover sidenav in docs app
    // Modal dialogs should fully cover application
    // to prevent interaction outside of dialog
    $mdDialog.show(
      $mdDialog.alert()
        .parent(angular.element(document.querySelector('#popupContainer')))
        .clickOutsideToClose(true)
        .title('This is an alert title')
        .textContent('You can specify some description text in here.')
        .ariaLabel('Alert Dialog Demo')
        .ok('Got it!')
        .targetEvent(ev)
    );
  };

Answer 1

查看文档，似乎没有办法更改对话框的颜色或其周围的颜色。所以唯一的方法是覆盖 AngularJS Material CSS 规则。

如果您检查对话框的背景，您将被指向一个带有 .md-opaque 类的 md-backdrop 标签。所以你需要做的就是像这样设置你自己的规则:

md-backdrop.md-opaque {
    opacity: .85; /* default value: .48 */
    background-color: green; /* default value: rgba(33, 33, 33, 1.0) */
}

演示:

angular.module('app', ['ngMaterial']).controller('ctrl', function($scope, $mdDialog) {
  $scope.showAlert = function(ev) {
    $mdDialog.show(
      $mdDialog.alert()
        .parent(angular.element(document.querySelector('#popupContainer')))
        .clickOutsideToClose(true)
        .title('This is an alert title')
        .textContent('You can specify some description text in here.')
        .ariaLabel('Alert Dialog Demo')
        .ok('Got it!')
        .targetEvent(ev)
    );
  };
});

md-backdrop.md-opaque {
    opacity: .85;
    background-color: green;
}

<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.6/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.6/angular-material.min.js"></script>

<div ng-app="app" ng-controller="ctrl" id="popupContainer">
  <md-button class="md-primary md-raised" ng-click="showAlert($event)">
    Alert Dialog
  </md-button>
</div>