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

src/modal/docs/readme.md

@@ -11,6 +11,7 @@ The `$modal` service has only one method: `open(options)` where available option
 * `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
 * `windowClass` - additional CSS class(es) to be added to a modal window template
+* `backdropClass` - additional CSS class(es) to be added to a modal backdrop template
 
 The `open` method returns a modal instance, an object with the following properties:
 

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;
 
@@ -221,7 +222,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);
         }
 
@@ -353,7 +356,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
                 content: tplAndVars[0],
                 backdrop: modalOptions.backdrop,
                 keyboard: modalOptions.keyboard,
-                windowClass: modalOptions.windowClass
+                windowClass: modalOptions.windowClass,
+                backdropClass: modalOptions.backdropClass
               });
 
             }, function resolveError(reason) {

src/modal/test/modal.spec.js

@@ -431,6 +431,18 @@ describe('$modal', function () {
         expect($document.find('div.modal')).toHaveClass('additional');
       });
     });
+
+    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('multiple modals', function () {
@@ -498,4 +510,4 @@ describe('$modal', function () {
       expect(body).not.toHaveClass('modal-open');
     });
   });
-});
+});

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>