diff --git a/src/modal/docs/readme.md b/src/modal/docs/readme.md index 42b315b256..1c36320f00 100644 --- a/src/modal/docs/readme.md +++ b/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 diff --git a/src/modal/modal.js b/src/modal/modal.js index 36eac557b5..d9eea88f01 100644 --- a/src/modal/modal.js +++ b/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('
')(backdropScope); + var angularBackgroundDomEl = angular.element('
'); + 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 diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js index 6130af0fcf..6416822c5e 100644 --- a/src/modal/test/modal.spec.js +++ b/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: '
With custom backdrop class
', + 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 () { diff --git a/template/modal/backdrop.html b/template/modal/backdrop.html index 2e6fbec9ee..9cbfcb6cbb 100644 --- a/template/modal/backdrop.html +++ b/template/modal/backdrop.html @@ -1,4 +1,4 @@ -