4

I have used the below code for showing a dialog, but I want to change the default style of the dialog.

Here's my code:

$scope.LocationRejectModal = function (msg) {
  var PersonName= msg.from.local;
  var confirm = $mdDialog.confirm()
    .title('Location')
    .textContent(PersonName+' has Rejected Location sharing Request.')
    .targetEvent(event)
    .ok('Ok')
  $mdDialog.show(confirm).then(function() {
      //some code
  }, function() {
      //some code   
    });
  };

How can this be done?

Edric
  • 24,639
  • 13
  • 81
  • 91

4 Answers4

3

I had a similar situation where I wanted to add custom button styles instead of the default because it was hard to see.

this.$rootScope.isErrorDialogOpen = true;
var confirm = this.$mdDialog.confirm({
  onComplete: function afterShowAnimation() {
    var $dialog = angular.element(document.querySelector('md-dialog'));
    var $actionsSection = $dialog.find('md-dialog-actions');
    var $cancelButton = $actionsSection.children()[0];
    var $confirmButton = $actionsSection.children()[1];
    angular.element($confirmButton).addClass('md-raised md-accent');
    angular.element($cancelButton).addClass('md-raised');
  }
})
  .title('Session Timeout')
  .textContent('Would you like to stay logged into the application?')
  .ok('Yes')
  .cancel('No');
this.$mdDialog.show(confirm).then(() => {
  // Your code goes here
}, () => {
  // Your code goes here
}
Edric
  • 24,639
  • 13
  • 81
  • 91
jsPlayer
  • 1,195
  • 7
  • 32
  • 56
0

you can't apply custom style to predefined dialogs such as Alert and Confirm. If you have to use your custom css rules, you have to implement the Custom dialogs or a Pre-rendered dialog. In the first way the dialog content will be rendered only if it has to be, for example when you open the dialog itself. In the second way (using the pre-rendered dialog), the dialog's content will be rendered with the page. It will be hidden by default and you show it only when, for example, a button is pressed.

In both of them you can easly apply custom css rules where you need them.

In the documentation, you can find more information.

Lorenzo Montanari
  • 958
  • 1
  • 15
  • 19
0

You could also add an attribute to the md-dialog-actions button for unique styling as follows 

    function showConfirmDialogBox(evt) {
       var confirm = $mdDialog.confirm({
           onComplete: function runAfterAnimation() {
                var mdDialogActions = angular.element(document.getElementsByTagName('md-dialog-actions').children();
                angular.element(mdDialogActions[0]).attr('id', 'customConcelButton'); // for the md-cancel-button
                angular.element(mdDialogActions[1]).attr('id', 'customConfirmButton'); // for the md-confirm-button
           }
    })
    .title('This is the title of dialog')
    .textContent('This is the text content of the dialog')
    .ariaLabel('Attention')
    .targetEvent(evt)
    .ok('Accept')
    .cancel('Reject');
    $mdDialog.show(confirm).then(function() {
     // code
    }, function() {
    // code
    });
    }
Frederick Eze
  • 121
  • 1
  • 12
0

Too late but, you can change the template: $mdDialog.confirm()._options.template Use ng-click="dialog.hide()" for Ok buttond and ng-click="dialog.abort() for cancel.

Example:

        var confirm = $mdDialog.confirm()

        confirm._options.template = '<div id="modal-gestion">' +
            '<div id="modal-gestion-title">' +
            '<h3>'+titulo+'</h3>' +
            '</div>' +
            '<div id="modal-gestion-body">' +
            '<p>¿Desea eliminar la ubicaión?</p>' +
            '</div>' +
            '<div id="modal-gestion-buttons">' +
            '<md-button class="btn btn-info" ng-click="dialog.hide()" id="modal-gestion-buttonSi">Eliminar</md-button>' +
            '<md-button class="btn btn-danger" ng-click="dialog.abort()" id="modal-gestion-buttonNo">Cancelar</md-button>' +
            '</div>' +
            '</div>'


        $mdDialog.show(confirm).then(function () {
              // code            }), function () {

        });   // code
Adri96MH
  • 1