modals.md

+# Modals
+
+## Outlet
+The modal outlet is the container for our modals.  Currently the outlet only supports one modal open at a time, though this could probably be adjusted to be able to support any amount of open modals if needed.
+
+Somewhere in your templates (default `app.component.html`), you'll need to place the following:
+
+``` html
+<modal-outlet></modal-outlet>
+```
+
+It really shouldn't matter where this is placed at, but it's probably best to keep it in `app.component.html` at the end of the file.
+
+## Service
+The `ModalService` hooks into the outlet, and can inject any component into it with a set of options for customization.
+
+To open a modal, you need to have the ModalService and the component you want to open imported, and run the following:
+
+``` javascript
+this.modalService.open(AnyAngularComponent, {
+  // Options go here
+}).subscribe((r) => {
+  // Do something with the result here
+});
+```
+
+Similarly, to close a modal, run the following:
+``` javascript
+this.modalService.close(data);  // Data can be any of any type.
+```
+
+#### Note:
+Any component you want to open as a modal needs to be placed in your modules `entryComponents` list.
+
+``` javascript
+entryComponents: [
+  ConfirmComponent,
+]
+```
+
+## Options
+There are options that can be set to override default behavior.  Below are the default options.  You aren't limited to these options, you can add any fields you want.
+
+``` javascript
+{
+  backdrop: true,         // If true, content behind the modal will be blurred.
+  closeDisabled: false,   // The modal outlet has a close button by default, this can be disabled.
+  height: '',             // The height of the modal.  Any CSS unit can be used here.
+  width: '',              // The width of the modal.  Any CSS unit can be used here.
+  position: null,         // See position for how to configure this.
+  data: null,             // Data accessible to this modal.
+};
+```
+
+## Position option
+
+By default, the modal will be placed in the center of the screen.  You can override the options to place the modal anywhere you like.
+
+``` javascript
+{
+  type: 'relative',  // Fixed, absolute, relative, or any other css position value.
+  top: 'auto';       // The rest of the fields take any CSS unit.
+  bottom: 'auto';
+  left: 'auto';
+  right: 'auto';
+}
+```
+
+## Putting it all together.
+
+Included in the template is a override-able confirm modal.  Here's an example of opening the confirm modal, with no backdrop, no close button, 600px wide, in the top right, with data passed to it, and subscribing to the users selection.
+
+``` javascript
+this.modalService.open(ConfirmComponent, {
+  'backdrop': false,
+  'closeDisabled': true,
+  'width': '600px',
+  'height': 'auto',
+  'position': {
+    'type': 'absolute',
+    'right': '16px',
+    'top': '60px'
+   }
+  'data': {
+    'title': 'Are You Sure?',
+    'body': 'Do you really want to delete this comment?',
+    'okText': 'Yes',
+    'cancelText': 'No',
+  }
+}).subscribe((result) => {
+  // If result is true, handle deleting the object.
+});
+```
\ No newline at end of file