Merge branch 'pr/6'

README.md

@@ -26,7 +26,9 @@ Then import and include in your component's directives:
         directives: [MODAL_DIRECTIVES]
     })
 
-## Example
+## Examples
+
+### Example: Default modal
 
     <button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>
 
@@ -39,5 +41,20 @@ Then import and include in your component's directives:
         </modal-body>
         <modal-footer [show-default-buttons]="true"></modal-footer>
     </modal>
-
 ![Example](demo/images/modal.png)
+
+### Example: Static modal
+This will create a modal that cannot be closed with the escape key or by clicking outside of the modal.
+
+    <button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>
+
+    <modal #modal [keyboard]="false" [backdrop]="'static'">
+        <modal-header [show-close]="false">
+            <h4 class="modal-title">I'm a modal!</h4>
+        </modal-header>
+        <modal-body>
+            Hello World!
+        </modal-body>
+        <modal-footer [show-default-buttons]="true"></modal-footer>
+    </modal>
+

demo/app.component.html

@@ -6,6 +6,7 @@ <h1>Modal</h1>
     <button type="button" class="btn btn-default" (click)="modal.open('lg')">Large modal</button>
     <button type="button" class="btn btn-default" (click)="modal.open('sm')">Small modal</button>
     <button type="button" class="btn btn-default" (click)="animationsEnabled = !animationsEnabled">Toggle Animation ({{ animationsEnabled }})</button>
+    <button type="button" class="btn btn-default" (click)="noKeyboardModal.open()">Static</button>
     <div [hidden]="!selected">Selection from a modal: {{ selected }}</div>
 
     <modal [animation]="animationsEnabled" (onClose)="onClose($event)" #modal>
@@ -22,4 +23,19 @@ <h4 class="modal-title">I'm a modal!</h4>
         </modal-body>
         <modal-footer [show-default-buttons]="true"></modal-footer>
     </modal>
-</section>
+
+    <modal [animation]="animationsEnabled" [keyboard]="false" [backdrop]="'static'" (onClose)="onClose($event)" #noKeyboardModal>
+        <modal-header [show-close]="false">
+            <h4 class="modal-title">Can't close me with your keyboard!</h4>
+        </modal-header>
+        <modal-body>
+            <ul>
+                <li *ngFor="#item of items">
+                    <a href="#" (click)="$event.preventDefault(); modalSelected = item">{{ item }}</a>
+                </li>
+            </ul>
+            Selected: <b>{{ modalSelected }}</b>
+        </modal-body>
+        <modal-footer [show-default-buttons]="true"></modal-footer>
+    </modal>
+</section>

src/ng2-bs3-modal/components/modal.ts

@@ -5,7 +5,8 @@ declare var jQuery: any;
 @Component({
     selector: 'modal',
     template: `
-        <div id="{{id}}" class="modal" [ngClass]="{ fade: animation }" tabindex="-1" role="dialog">
+        <div id="{{id}}" class="modal" [ngClass]="{ fade: animation }" tabindex="-1" role="dialog"
+            [attr.data-keyboard]="keyboard" [attr.data-backdrop]="backdrop">
             <div class="modal-dialog" [ngClass]="{ 'modal-sm': isSmall(), 'modal-lg': isLarge() }">
                 <div class="modal-content">
                     <ng-content></ng-content>
@@ -22,6 +23,8 @@ export class ModalComponent implements AfterViewInit {
     hiding: boolean = false;
     overrideSize: string = null;
     @Input() animation: boolean = true;
+    @Input() backdrop: string;
+    @Input() keyboard: boolean;
     @Input() size: string;
     @Output() onClose: EventEmitter<string> = new EventEmitter();
 
@@ -88,4 +91,4 @@ export enum ModalResult {
 let id: number = 0;
 export function uniqueId(prefix: string): string {
     return prefix + ++id;
-}
+}

tsconfig.json

@@ -19,4 +19,4 @@
         "bundles",
         "components"
     ]
-}
+}