feat(modal): add 'backdropClass' option

Closes #2166
Closes #2248

demo/src/app/components/modal/demos/options/modal-options.html

@@ -13,7 +13,8 @@ <h4 class="modal-title">Modal title</h4>
   </div>
 </ng-template>
 
-<button class="btn btn-outline-primary" (click)="openCustomClass(content)">Modal with custom class</button>
-<button class="btn btn-outline-primary" (click)="openSm(content)">Small modal</button>
-<button class="btn btn-outline-primary" (click)="openLg(content)">Large modal</button>
-<button class="btn btn-outline-primary" (click)="openVerticallyCentered(content)">Modal vertically centered</button>
+<button class="btn btn-outline-primary mb-1" (click)="openWindowCustomClass(content)">Modal with window custom class</button>
+<button class="btn btn-outline-primary mb-1" (click)="openBackDropCustomClass(content)">Modal with backdrop custom class</button>
+<button class="btn btn-outline-primary mb-1" (click)="openSm(content)">Small modal</button>
+<button class="btn btn-outline-primary mb-1" (click)="openLg(content)">Large modal</button>
+<button class="btn btn-outline-primary mb-1" (click)="openVerticallyCentered(content)">Modal vertically centered</button>

demo/src/app/components/modal/demos/options/modal-options.ts

@@ -14,14 +14,21 @@ import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
     .dark-modal .close {
       color: white;
     }
+    .light-blue-backdrop {
+      background-color: #5cb3fd;
+    }
   `]
 })
 export class NgbdModalOptions {
   closeResult: string;
 
   constructor(private modalService: NgbModal) {}
 
-  openCustomClass(content) {
+  openBackDropCustomClass(content) {
+    this.modalService.open(content, {backdropClass: 'light-blue-backdrop'});
+  }
+
+  openWindowCustomClass(content) {
     this.modalService.open(content, { windowClass: 'dark-modal' });
   }
 

src/modal/modal-backdrop.ts

@@ -1,5 +1,10 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 
-@Component({selector: 'ngb-modal-backdrop', template: '', host: {'class': 'modal-backdrop fade show'}})
+@Component({
+  selector: 'ngb-modal-backdrop',
+  template: '',
+  host: {'[class]': '"modal-backdrop fade show" + (backdropClass ? " " + backdropClass : "")'}
+})
 export class NgbModalBackdrop {
+  @Input() backdropClass: string;
 }

src/modal/modal-stack.ts

@@ -22,6 +22,7 @@ import {NgbActiveModal, NgbModalRef} from './modal-ref';
 export class NgbModalStack {
   private _document: any;
   private _windowAttributes = ['backdrop', 'centered', 'keyboard', 'size', 'windowClass'];
+  private _backdropAttributes = ['backdropClass'];
 
   constructor(
       private _applicationRef: ApplicationRef, private _injector: Injector,
@@ -49,6 +50,10 @@ export class NgbModalStack {
     activeModal.dismiss = (reason: any) => { ngbModalRef.dismiss(reason); };
 
     this._applyWindowOptions(windowCmptRef.instance, options);
+
+    if (backdropCmptRef && backdropCmptRef.instance) {
+      this._applyBackdropOptions(backdropCmptRef.instance, options);
+    }
     return ngbModalRef;
   }
 
@@ -77,6 +82,14 @@ export class NgbModalStack {
     });
   }
 
+  private _applyBackdropOptions(backdropInstance: NgbModalBackdrop, options: Object): void {
+    this._backdropAttributes.forEach((optionName: string) => {
+      if (isDefined(options[optionName])) {
+        backdropInstance[optionName] = options[optionName];
+      }
+    });
+  }
+
   private _getContentRef(
       moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any,
       context: NgbActiveModal): ContentRef {

src/modal/modal.spec.ts

@@ -482,9 +482,9 @@ describe('ngb-modal', () => {
 
   });
 
-  describe('custom class options', () => {
+  describe('window custom class options', () => {
 
-    it('should render modals with the correct custom classes', () => {
+    it('should render modals with the correct window custom classes', () => {
       const modalInstance = fixture.componentInstance.open('foo', {windowClass: 'bar'});
       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveModal('foo');
@@ -497,6 +497,21 @@ describe('ngb-modal', () => {
 
   });
 
+  describe('backdrop custom class options', () => {
+
+    it('should render modals with the correct backdrop custom classes', () => {
+      const modalInstance = fixture.componentInstance.open('foo', {backdropClass: 'my-fancy-backdrop'});
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveModal('foo');
+      expect(document.querySelector('ngb-modal-backdrop')).toHaveCssClass('my-fancy-backdrop');
+
+      modalInstance.close();
+      fixture.detectChanges();
+      expect(fixture.nativeElement).not.toHaveModal();
+    });
+
+  });
+
   describe('custom injector option', () => {
 
     it('should render modal with a custom injector', () => {

src/modal/modal.ts

@@ -48,6 +48,11 @@ export interface NgbModalOptions {
    * Custom class to append to the modal window
    */
   windowClass?: string;
+
+  /**
+   * Custom class to append to the modal backdrop
+   */
+  backdropClass?: string;
 }
 
 /**