CODEWITHSUNDEEP
angularjsmddialog
paul590
paul590

Reputation: 1435

is there a way to change the color of the outside area in a mddialog?

Hello I am trying to change the color of a simple md dialog outside area from a dark transparent color to a different one it could either be darker or brighter, is this possible? Thank you for your help!

code from 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)
    );
  };

Upvotes: 3

Views: 2002

Answers (1)

Omar Einea
Omar Einea

Reputation: 2524

Looking at the documentation, there doesn't seem to be a way to change the dialog's color or its surrounding's color. So the only way is to override the AngularJS Material CSS rules.

If you inspect the dialog's background, you'll be pointed to a md-backdrop tag with the .md-opaque class on it. So all you need to do is set your own rule like this:

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

Demo:

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>

Upvotes: 3

Related Questions