Using angular material dialog as a popup

$mdDialog is a powerful popup service for angular, but the angular material design team.

The usage is relatively simple. On a click event (e.g. a button or a menu item) you add the following:

$mdDialog.show({
    targetEvent: $event,
    template: '<md-dialog>' +
    '  <md-dialog-content>Hello {{ employee }}!</md-dialog-content>' +
    '  <div class="md-actions">' +
    '    <md-button ng-click="closeDialog()" class="md-primary">' +
    '      Close Greeting' +
    '    </md-button>' +
    '  </div>' +
    '</md-dialog>',
    controller: function($scope, $mdDialog, employee){
       $scope.employee = employee;
       $scope.closeDialog = function(){$mdDialog.hide();};
    },
    locals: {employee: $scope.userName}
})

This should create a simple popup. Here’s the demo.

2 issues arise that might cause a setback:

1. There’s a darkening of the whole screen – called backdrop.
2. You can’t click anything because of the dialog’s container.

These two issues have 2 simple solutions:

1. You can add the option: hasBackdrop: false to the dialog’s option object. This solves this design issue.
2. Now you are left with the sore problem of clicking other parts of the screen. In order to solve this, just add the following code to your CSS:

.md-dialog-container{
    pointer-events: none;
}

md-dialog{
    pointer-events: all;
}

These two additions would tell the browser to not listen to mouse click events on the full screen container while listening to click events on the dialog box itself.

Click here for the demo for this one