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-backdrop标记，其中包含.md-opaque类。所以你需要做的就是设置你自己的规则：

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>

有没有办法改变mddialog中外部区域的颜色？

1 个答案: