feat(modals): add docs for nested modals

demo/src/app/components/+modal/demos/index.ts

@@ -2,12 +2,15 @@ import { DemoModalSizesComponent } from './sizes/sizes';
 import { DemoModalStaticComponent } from './static/static';
 import { DemoModalChildComponent } from './child/child';
 import { DemoAutoShownModalComponent } from './auto-shown/auto-shown';
+import { DemoNestedDropdownsComponent } from '../../+dropdown/demos/nested-dropdowns/nested-dropdowns';
+import { DemoModalNestedComponent } from './nested/nested';
 
 export const DEMO_COMPONENTS = [
   DemoModalSizesComponent,
   DemoModalChildComponent,
   DemoModalStaticComponent,
-  DemoAutoShownModalComponent
+  DemoAutoShownModalComponent,
+  DemoModalNestedComponent
 ];
 
 export const DEMOS = {
@@ -19,6 +22,10 @@ export const DEMOS = {
     component: require('!!raw-loader?lang=typescript!./child/child.ts'),
     html: require('!!raw-loader?lang=markup!./child/child.html')
   },
+  nested: {
+    component: require('!!raw-loader?lang=typescript!./nested/nested.ts'),
+    html: require('!!raw-loader?lang=markup!./nested/nested.html')
+  },
   staticModal: {
     component: require('!!raw-loader?lang=typescript!./static/static.ts'),
     html: require('!!raw-loader?lang=markup!./static/static.html')

demo/src/app/components/+modal/demos/nested/nested.html

@@ -0,0 +1,50 @@
+<button type="button" class="btn btn-primary" (click)="parentModal.show()">Open parent modal</button>
+<div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title pull-left">First modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <button type="button" class="btn btn-primary" (click)="childModal.show()">Open second modal</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title pull-left">Second modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        This is static modal <br>
+        <button type="button" class="btn btn-primary" (click)="childModall.show()">Open third modal</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" bsModal #childModall="bs-modal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title pull-left">Third modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        This is static modal <br>
+        Click <b>&times;</b> to close modal.
+      </div>
+    </div>
+  </div>
+</div>

demo/src/app/components/+modal/demos/nested/nested.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-modal-nested',
+  templateUrl: './nested.html'
+})
+export class DemoModalNestedComponent {
+
+}

demo/src/app/components/+modal/modal-section.component.ts

@@ -18,6 +18,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
         <li><a routerLink="." fragment="static">Static modal</a></li>
         <li><a routerLink="." fragment="sizes">Optional sizes</a></li>
         <li><a routerLink="." fragment="child">Child modal</a></li>
+        <li><a routerLink="." fragment="nested">Nested modals</a></li>
         <li><a routerLink="." fragment="auto-shown">Auto shown modal</a></li>
       </ul>
     </li>
@@ -52,6 +53,12 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
     <demo-modal-child></demo-modal-child>
   </ng-sample-box>
 
+  <h2 routerLink="." fragment="nested" id="nested">Nested modals</h2>
+  <p>Open a modal from another modal</p>
+  <ng-sample-box [ts]="demos.nested.component" [html]="demos.nested.html">
+    <demo-modal-nested></demo-modal-nested>
+  </ng-sample-box>
+
   <h2 routerLink="." fragment="auto-shown" id="auto-shown">Auto shown modal</h2>
   <p>
     Show modal right after it has been initialized.