opened
andrew-frueh
username_0
A modal dialog is a window that forces the user to interact with it before they can go back to using the parent application.  Our Catalyst modals include a header section with a title, a content area, and a footer section with Save and Cancel buttons.  The height of the header and footer should be fixed, but height and width of the overall modal should be configurable.

![modaldialog](https://user-images.githubusercontent.com/22795893/35474884-c2dd0b52-0351-11e8-9617-244b732a3c83.png)
Modal Dialog
issue
created
corytak
username_1
Currently, the Measures Manager team uses ngx-bootstrap's modal component for our modals.  In order to replace this functionality, we would need the ability to

- Open a modal
- Return a value on close

Other considerations from the style guide are about how we shouldn't allow modals to stack. Would an interface like this be too simplistic?
```
<hc-modal #testModal size="lg">
     <hc-test (close)="onClose($event)"></hc-test>
 </hc-modal>

<button (click)="testModal.open()"></button>
```
This would force the user to style the modal property with the `hc-test` component. We could take away some of the potential user variation by doing something like this:
```
<hc-modal #testModal size="lg" (close)="onClose($event)">
      <hc-modal-header title="test"></hc-modal-header>
      <hc-modal-body>Modal Body Here</hc-modal-body>
      <hc-modal-footer>
          <button hc-button color="tertiary"> Cancel </button>
          <button hc-button color="primary"> Save </button>
       </hc-modal-footer>
 </hc-modal>

<button (click)="testModal.open()"></button>
```
And use a modal service to handle the state and communciation between the different components. 

Other methods might include creating an `HCModalService` that other components can inject and use to create/interact with modal:

```
let testModal = this.modalService.open(TestComponent);
testModal.close();
testModal.onClose().subscribe(res => doSomething(res));
```
comment
created
jtrujill
username_2
I didn't really like the way that ngx-bootstrap was implemented and found that it had a lot of issues with complex layouts. I actually prefered @ng-bootstrap, which handles modals correctly by projecting it's content to as a direct child of the <body>, this avoids issues with overflow:none, and stacking issues. I also really liked the idea of putting your modal content in a component and passing that to the service NgbModal.open() instead of embedding the modal directly into the component that wants to create a modal. 

I can help with the content projection to the body element once I clear some components I'm currently working on.
comment
closed
corytak
username_1
issue