diff --git a/src/modal/docs/readme.md b/src/modal/docs/readme.md index 2e69a34a8f..601de00aec 100644 --- a/src/modal/docs/readme.md +++ b/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: diff --git a/src/modal/modal.js b/src/modal/modal.js index 3b30469a29..92e287b25e 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; @@ -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('
')(backdropScope); + var angularBackgroundDomEl = angular.element('
'); + 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) { diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js index 6c6259a15b..d9cfd8152c 100644 --- a/src/modal/test/modal.spec.js +++ b/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: '
With custom backdrop class
', + 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'); }); }); -}); \ No newline at end of file +}); 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 @@ -