Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(modal): add backdropClass option, similar to windowClass option
Browse files Browse the repository at this point in the history
Really, identical to windowClass, but for backdrop.

Fixes #1179
Closes #1862
  • Loading branch information
jsanders authored and pkozlowski-opensource committed May 4, 2014
1 parent ef62364 commit 353e612
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 4 deletions.
1 change: 1 addition & 0 deletions src/modal/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 6 additions & 2 deletions src/modal/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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('<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);
}

Expand Down Expand Up @@ -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
Expand Down
14 changes: 13 additions & 1 deletion src/modal/test/modal.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: '<div>With custom backdrop class</div>',
backdropClass: 'additional'
});

expect($document.find('div.modal-backdrop')).toHaveClass('additional');
});
});
});

describe('custom window classes', function () {
Expand All @@ -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 () {
Expand Down
2 changes: 1 addition & 1 deletion template/modal/backdrop.html
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 353e612

Please sign in to comment.