diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html index 8d3f4890819c..70237608546c 100644 --- a/src/demo-app/dialog/dialog-demo.html +++ b/src/demo-app/dialog/dialog-demo.html @@ -43,6 +43,16 @@

Dialog position

+

Dialog backdrop

+ +

+ + + +

+ + Has backdrop +

Other options

diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index 5ccd67a0ec68..f0e5875d17bb 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -15,6 +15,8 @@ export class DialogDemo { actionsAlignment: string; config: MdDialogConfig = { disableClose: false, + hasBackdrop: true, + backdropClass: '', width: '', height: '', position: { diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index 96b4586e73d5..1bb43ae60871 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -27,6 +27,12 @@ export class MdDialogConfig { /** The ARIA role of the dialog element. */ role?: DialogRole = 'dialog'; + /** Whether the dialog has a backdrop. */ + hasBackdrop?: boolean = true; + + /** Custom class for the backdrop, */ + backdropClass?: string = ''; + /** Whether the user can use escape or clicking outside to close a modal. */ disableClose?: boolean = false; diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 187c37908e46..c58ffda3382e 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -397,6 +397,54 @@ describe('MdDialog', () => { }); }); + describe('hasBackdrop option', () => { + it('should have a backdrop', () => { + dialog.open(PizzaMsg, { + hasBackdrop: true, + viewContainerRef: testViewContainerRef + }); + + viewContainerFixture.detectChanges(); + + expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeTruthy(); + }); + + it('should not have a backdrop', () => { + dialog.open(PizzaMsg, { + hasBackdrop: false, + viewContainerRef: testViewContainerRef + }); + + viewContainerFixture.detectChanges(); + + expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeFalsy(); + }); + }); + + describe('backdropClass option', () => { + it('should have default backdrop class', () => { + dialog.open(PizzaMsg, { + backdropClass: '', + viewContainerRef: testViewContainerRef + }); + + viewContainerFixture.detectChanges(); + + expect(overlayContainerElement.querySelector('.cdk-overlay-dark-backdrop')).toBeTruthy(); + }); + + it('should have custom backdrop class', () => { + dialog.open(PizzaMsg, { + backdropClass: 'custom-backdrop-class', + viewContainerRef: testViewContainerRef + }); + + viewContainerFixture.detectChanges(); + + expect(overlayContainerElement.querySelector('.custom-backdrop-class')).toBeTruthy(); + }); + }); + describe('focus management', () => { // When testing focus, all of the elements must be in the DOM. diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index bc828b62d317..c615101c08de 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -108,7 +108,10 @@ export class MdDialog { */ private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState { let overlayState = new OverlayState(); - overlayState.hasBackdrop = true; + overlayState.hasBackdrop = dialogConfig.hasBackdrop; + if (dialogConfig.backdropClass) { + overlayState.backdropClass = dialogConfig.backdropClass; + } overlayState.positionStrategy = this._overlay.position().global(); return overlayState;