feat(modal): add backdropClass option, similar to windowClass option

Really, identical to windowClass, but for backdrop.

Fixes #1179
Closes #1862

Author: jsanders

src/modal/docs/readme.md

@@ -10,6 +10,7 @@ The `$modal` service has only one method: `open(options)` where available option
 * `resolve` - members that will be resolved and passed to the controller as locals; it is equivalent of the `resolve` property for AngularJS routes
 * `backdrop` - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), `'static'` - backdrop is present but modal window is not closed when clicking outside of the modal window.
 * `keyboard` - indicates whether the dialog should be closable by hitting the ESC key, defaults to true
+* `backdropClass` - additional CSS class(es) to be added to a modal backdrop template
 * `windowClass` - additional CSS class(es) to be added to a modal window template
 * `windowTemplateUrl` - a path to a template overriding modal's window template
 * `size` - optional size of modal window. Allowed values: `'sm'` (small) or  `'lg'` (large). Requires Bootstrap 3.1.0 or later

src/modal/modal.js

@@ -62,7 +62,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
       restrict: 'EA',
       replace: true,
       templateUrl: 'template/modal/backdrop.html',
-      link: function (scope) {
+      link: function (scope, element, attrs) {
+        scope.backdropClass = attrs.backdropClass || '';
 
         scope.animate = false;
 
@@ -225,7 +226,9 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
         if (currBackdropIndex >= 0 && !backdropDomEl) {
           backdropScope = $rootScope.$new(true);
           backdropScope.index = currBackdropIndex;
-          backdropDomEl = $compile('<div modal-backdrop></div>')(backdropScope);
+          var angularBackgroundDomEl = angular.element('<div modal-backdrop></div>');
+          angularBackgroundDomEl.attr('backdrop-class', modal.backdropClass);
+          backdropDomEl = $compile(angularBackgroundDomEl)(backdropScope);
           body.append(backdropDomEl);
         }
 
@@ -360,6 +363,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
                 content: tplAndVars[0],
                 backdrop: modalOptions.backdrop,
                 keyboard: modalOptions.keyboard,
+                backdropClass: modalOptions.backdropClass,
                 windowClass: modalOptions.windowClass,
                 windowTemplateUrl: modalOptions.windowTemplateUrl,
                 size: modalOptions.size

src/modal/test/modal.spec.js

@@ -460,6 +460,18 @@ describe('$modal', function () {
         expect(backdropEl).not.toHaveClass('in');
 
       });
+
+      describe('custom backdrop classes', function () {
+
+        it('should support additional backdrop class as string', function () {
+          open({
+            template: '<div>With custom backdrop class</div>',
+            backdropClass: 'additional'
+          });
+
+          expect($document.find('div.modal-backdrop')).toHaveClass('additional');
+        });
+      });
     });
 
     describe('custom window classes', function () {
@@ -473,7 +485,7 @@ describe('$modal', function () {
         expect($document.find('div.modal')).toHaveClass('additional');
       });
     });
-    
+
     describe('size', function () {
 
       it('should support creating small modal dialogs', function () {

template/modal/backdrop.html

@@ -1,4 +1,4 @@
-<div class="modal-backdrop fade"
+<div class="modal-backdrop fade {{ backdropClass }}"
      ng-class="{in: animate}"
      ng-style="{'z-index': 1040 + (index && 1 || 0) + index*10}"
 ></div>