{{title}}

#### Modals:

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Base specifications: bootstrap 3 or bootstrap 4.

#### Modals Example:

##### Static Modals

#### Large modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

#### Middle modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

#### Small modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

##### Dynamic Modals

Please select your option.

infomation type
infomation message:

#### {{dialogInfo.title}}

{{dynamicModalContent}}

#### Modals Example Code:

              <!-- mockup -->
               <button type="button" class="btn btn-primary" (click)="showDialog()">Create Modals</button>
               <!-- Dynamic modal -->
               <div bsModal #dynamicModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myDynamicModalLabel" aria-hidden="true">
                 <div class="modal-dialog modal-md">
                   <div class="modal-content">
                     <div class="modal-header modal-header-success">
                       <button type="button" class="close" (click)="dynamicModal.hide()" aria-label="Close">
                         <span aria-hidden="true">×</span>
                       </button>
                       <h4 class="modal-title">{ {dialogInfo.title} }</h4>
                     </div>
                     <div class="modal-body">
                       <span class="glyphicon" [ngClass]="{'glyphicon-info-sign text-info':dialogInfo.type==='Info','glyphicon-ok-sign text-success':dialogInfo.type==='Success','glyphicon-warning-sign text-warning':dialogInfo.type==='Warning','glyphicon-remove-sign text-danger':dialogInfo.type==='Danger'}"></span>
                        { {dynamicModalContent} }
                     </div>
                     <div class="modal-footer">
                       <button type="button" class="btn btn-primary" *ngFor="let bt of dialogInfo.buttons" (click)="dialogBtnClick(bt)">{ {bt} }</button>
                     </div>
                   </div>
                 </div>
               </div>

              // typescript
              export class ModalsComponent {
                  @ViewChild('dynamicModal') dynamicModal:any;
                  public title="Modals Component";
                  public required:boolean=false;
                  public dynamicModalContent:string='This is a dynamic modal.';
                  public dynamicModalInfoType:string='Info';
                  public dialogInfo:any={
                    title:'',
                    type:'Info',
                    content:'This is a dynamic modal.',
                    buttons:[]
                  };
                  public showDialog(){
                    this.dialogInfo.title=this.dialogInfo.type+' Modal';
                    this.dialogInfo.buttons=this.dialogInfo.type==='Warning'? ['Continue','Cancel']:['OK'];
                    this.dynamicModal.show();
                  }
                  public dialogBtnClick(btnType:any){
                    console.log(btnType);
                    this.dynamicModal.hide();
                  }
              }

#### Modal properties:

- `config` (`?:ModalOptions`) - modal configuration (default is: `backdrop:true,keyboard: true,focus: true,show: true`)

#### Modal methods:

- `show` - show modal
- `hide` - hides modal
- `toggle` - toggles modal visibility

#### Modal events:

- `onShow` - This event fires immediately when the `show` instance method is called.
- `onShown` - This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete)
- `onHide` - This event is fired immediately when the `hide` instance method has been called.
- `onHidden` - This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).