feat(modal): add support for custom window settings

Closes #892

Author: pkozlowski-opensource

src/modal/docs/readme.md

@@ -9,6 +9,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
+* `windowClass` - additional CSS class(es) to be added to a modal window template
 
 The `open` method returns a modal instance, an object with the following properties:
 

src/modal/modal.js

@@ -84,6 +84,8 @@ angular.module('ui.bootstrap.modal', [])
       transclude: true,
       templateUrl: 'template/modal/window.html',
       link: function (scope, element, attrs) {
+        scope.windowClass = attrs.windowClass || '';
+
         //trigger CSS transitions
         $timeout(function () {
           scope.animate = true;
@@ -138,10 +140,13 @@ angular.module('ui.bootstrap.modal', [])
           backdropDomEl = $compile(angular.element('<div modal-backdrop></div>'))($rootScope);
           body.append(backdropDomEl);
         }
-        var modalDomEl = $compile(angular.element('<div modal-window></div>').html(modal.content))(modal.scope);
-        body.append(modalDomEl);
 
-        
+        var angularDomEl = angular.element('<div modal-window></div>');
+        angularDomEl.attr('window-class', modal.windowClass);
+        angularDomEl.html(modal.content);
+
+        var modalDomEl = $compile(angularDomEl)(modal.scope);
+        body.append(modalDomEl);
 
         openedWindows.add(modalInstance, {
           deferred: modal.deferred,
@@ -266,7 +271,8 @@ angular.module('ui.bootstrap.modal', [])
                 deferred: modalResultDeferred,
                 content: tplAndVars[0],
                 backdrop: modalOptions.backdrop,
-                keyboard: modalOptions.keyboard
+                keyboard: modalOptions.keyboard,
+                windowClass: modalOptions.windowClass
               });
 
             }, function resolveError(reason) {

src/modal/test/modal.spec.js

@@ -360,6 +360,18 @@ describe('$modal', function () {
         expect($document).toHaveBackdrop();
       });
     });
+
+    describe('custom window classes', function () {
+
+      it('should support additional window class as string', function () {
+        open({
+          template: '<div>With custom window class</div>',
+          windowClass: 'additional'
+        });
+
+        expect($document.find('div.modal')).toHaveClass('additional');
+      });
+    });
   });
 
   describe('multiple modals', function () {

src/modal/test/modalWindow.spec.js

@@ -0,0 +1,18 @@
+describe('modal window', function () {
+
+  var $rootScope, $compile;
+
+  beforeEach(module('ui.bootstrap.modal'));
+  beforeEach(module('template/modal/window.html'));
+  beforeEach(inject(function (_$rootScope_, _$compile_) {
+    $rootScope = _$rootScope_;
+    $compile = _$compile_;
+  }));
+
+  it('should support custom CSS classes as string', function () {
+    var windowEl = $compile('<div modal-window window-class="test">content</div>')($rootScope);
+    $rootScope.$digest();
+
+    expect(windowEl).toHaveClass('test');
+  });
+});

template/modal/window.html

@@ -1 +1 @@
-<div class="modal fade" ng-class="{in: animate}" ng-transclude></div>
+<div class="modal fade {{ windowClass }}" ng-class="{in: animate}" ng-transclude></div>