diff --git a/src/modal/docs/readme.md b/src/modal/docs/readme.md index 697a587cfd..11badf65a8 100644 --- a/src/modal/docs/readme.md +++ b/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: diff --git a/src/modal/modal.js b/src/modal/modal.js index d7935a4d91..1426e89ec4 100644 --- a/src/modal/modal.js +++ b/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('
'))($rootScope); body.append(backdropDomEl); } - var modalDomEl = $compile(angular.element('
').html(modal.content))(modal.scope); - body.append(modalDomEl); - + var angularDomEl = angular.element('
'); + 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) { diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js index 46f9cafc34..e1f3261c04 100644 --- a/src/modal/test/modal.spec.js +++ b/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: '
With custom window class
', + windowClass: 'additional' + }); + + expect($document.find('div.modal')).toHaveClass('additional'); + }); + }); }); describe('multiple modals', function () { diff --git a/src/modal/test/modalWindow.spec.js b/src/modal/test/modalWindow.spec.js new file mode 100644 index 0000000000..c117ee9207 --- /dev/null +++ b/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('
content
')($rootScope); + $rootScope.$digest(); + + expect(windowEl).toHaveClass('test'); + }); +}); \ No newline at end of file diff --git a/template/modal/window.html b/template/modal/window.html index e83cf51c75..787cd6afd7 100644 --- a/template/modal/window.html +++ b/template/modal/window.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file