fix: added modal container as a configuration option

docs/app/documentation/component-docs/modal/examples/backdrop-examples/backdrop-examples.component.ts

@@ -22,11 +22,12 @@ export class BackdropExamplesComponent {
 
     openCustomBackdrop(modal): void {
         this.modalService.open(modal, {
+            container: document.activeElement as HTMLElement,
             backdropClass: 'modal-custom-overlay-example',
             backdropClickCloseable: false,
             maxWidth: '400px',
             data: 'This modal has a custom backdrop! Classes applied to the backdrop' +
-                ' must be in your global styles file. You may also need to override some properties using !important.'
+                ' do not have to be in your global styles file.'
         });
     }
 }

docs/app/documentation/component-docs/modal/examples/component-as-content/modal-content.component.ts

@@ -1,5 +1,4 @@
-import { Component, Input } from '@angular/core';
-import { ModalService } from '../../../../../../../library/src/lib/modal/modal-service/modal.service';
+import { Component } from '@angular/core';
 import { ModalRef } from '../../../../../../../library/src/lib/modal/modal-utils/modal-ref';
 
 @Component({

docs/app/documentation/component-docs/modal/examples/stackable-modals/modal-in-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import { ModalService } from '../../../../../../../library/src/lib/modal/modal-service/modal.service';
 import { ModalInModalSecondComponent } from './modal-in-modal-second.component';
 import { ModalRef } from '../../../../../../../library/src/lib/modal/modal-utils/modal-ref';

docs/app/documentation/component-docs/modal/examples/template-as-content/modal-open-template-example.component.ts

@@ -7,6 +7,7 @@ import { ModalService } from '../../../../../../../library/src/lib/modal/modal-s
     styles: ['.action-button {margin-left: 12px;}']
 })
 export class ModalOpenTemplateExampleComponent {
+
     confirmationReason: string;
 
     constructor(private modalService: ModalService) {}

docs/app/documentation/component-docs/modal/modal-docs-header/modal-docs-header.component.html

@@ -1,7 +1,8 @@
 <header>Modal</header>
-<description>The modal is used as a container to be displayed in response to a action. It is commonly used to collect
-    simple information
-    with a short form, to get confirmation or display contextual information that does not require a page.
+<description>
+    The modal is used as a container to be displayed in response to an action. It is commonly used to collect
+    simple information with a short form, to get confirmation or display contextual information
+    that does not require a page.
 </description>
 <import module="ModalModule" path="fundamental-ngx"></import>
 

docs/app/documentation/component-docs/modal/modal-docs-header/modal-docs-header.component.ts

@@ -1,15 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-modal-docs-header',
   templateUrl: './modal-docs-header.component.html',
   styleUrls: ['./modal-docs-header.component.scss']
 })
-export class ModalDocsHeaderComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
+export class ModalDocsHeaderComponent {}

docs/app/documentation/component-docs/modal/modal-docs.component.html

@@ -60,8 +60,8 @@ <h2>Stacked Modals</h2>
 
 <h2>Backdrop Configuration</h2>
 <description>
-    The modal backdrop can be styled, disabled or even customized at will. Classes being applied to the backdrop must be
-    in the global styles file.
+    The modal backdrop can be styled, disabled or even customized at will. Classes being applied
+    to the element do not have to be in your global styles.
 </description>
 <component-example [name]="'ex6'">
     <fd-backdrop-examples></fd-backdrop-examples>

library/src/lib/modal/modal-service/modal.service.ts

@@ -114,7 +114,11 @@ export class ModalService {
 
         // Render container
         const containerEl = (containerRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
-        document.body.appendChild(containerEl);
+        if (modalConfig.container !== 'body') {
+            modalConfig.container.appendChild(containerEl);
+        } else {
+            document.body.appendChild(containerEl);
+        }
 
         // Render backdrop
         if (modalConfig.hasBackdrop) {

library/src/lib/modal/modal-utils/modal-config.ts

@@ -52,6 +52,9 @@ export class ModalConfig {
     /** Whether the modal should be focus trapped. */
     focusTrapped?: boolean = true;
 
+    /** The container that the modal is appended to. By default, it is appended to the body. */
+    container?: HTMLElement | 'body' = 'body';
+
     /** Data to pass along to the content through the ModalRef. */
     data?: any;
 }