diff --git a/src/modal/modal-config.ts b/src/modal/modal-config.ts index a657d364fd..156cd253b5 100644 --- a/src/modal/modal-config.ts +++ b/src/modal/modal-config.ts @@ -44,9 +44,11 @@ export interface NgbModalOptions { /** * A selector specifying the element all new modal windows should be appended to. * + * If passed a `HTMLElement`, all new modal windows should be appended to it. + * * If not specified, will be `body`. */ - container?: string; + container?: string | HTMLElement; /** * The `Injector` to use for modal content. diff --git a/src/modal/modal-stack.ts b/src/modal/modal-stack.ts index fc4d9695ca..c212683125 100644 --- a/src/modal/modal-stack.ts +++ b/src/modal/modal-stack.ts @@ -46,8 +46,9 @@ export class NgbModalStack { } open(moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, options): NgbModalRef { - const containerEl = - isDefined(options.container) ? this._document.querySelector(options.container) : this._document.body; + const containerEl = options.container instanceof HTMLElement ? options.container : isDefined(options.container) ? + this._document.querySelector(options.container) : + this._document.body; const renderer = this._rendererFactory.createRenderer(null, null); const revertPaddingForScrollBar = this._scrollBar.compensate(); diff --git a/src/modal/modal.spec.ts b/src/modal/modal.spec.ts index c80ffdd9ae..3d99cb1e71 100644 --- a/src/modal/modal.spec.ts +++ b/src/modal/modal.spec.ts @@ -461,6 +461,17 @@ describe('ngb-modal', () => { expect(fixture.nativeElement).not.toHaveModal(); }); + it('should attach window and backdrop elements to the specified container DOM element', () => { + const containerDomEl = document.querySelector('div#testContainer'); + const modalInstance = fixture.componentInstance.open('foo', {container: containerDomEl}); + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveModal('foo', '#testContainer'); + + modalInstance.close(); + fixture.detectChanges(); + expect(fixture.nativeElement).not.toHaveModal(); + }); + it('should throw when the specified container element doesn\'t exist', () => { const brokenSelector = '#notInTheDOM'; expect(() => {