# Modal Demo
A modal displays content that temporarily blocks interactions with the main view of a site

### Design

Click button to show modal.

Profile Picture
We've auto-chosen a profile image for you.

We've grabbed the following image from the gravatar image associated with your registered e-mail address.

Is it okay to use this photo?

Nope
Yep, that's me

### Operate

Show Modal
Type:
Size:

### Codes

    <lsu-modal #demoModal [active]="actived" [options]="modalOptions">
      <div class="header">
        Profile Picture
      </div>
      <div class="image content">
        <div class="description">
          <div class="ui header">We've auto-chosen a profile image for you.</div>
          <p>We've grabbed the following image from the
            <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
          <p>Is it okay to use this photo?</p>
        </div>
      </div>
      <div class="actions">
        <div class="ui black deny button" (click)="hideModal()">
          Nope
        </div>
        <div class="ui positive right labeled icon button" (click)="hideModal()">
          Yep, that's me
          <i class="checkmark icon"></i>
        </div>
      </div>
    </lsu-modal>

    import { Component, ViewChild } from '@angular/core';

    @Component({
      selector: 'modal-demo',
      templateUrl: './modal.html'
    })
    export class ModalDemoPage {

      @ViewChild('demoModal')
      demoModal: any;

      actived = false;

      modalOptions: any;

      constructor() {

      }

      ngOnInit() {
        this.modalOptions = {
          "size": "small",
          "type": "default",
          "closeable": true
        }
      }

      showModal() {
        this.actived = true;
        // OR this.demoModal.show();
      }

      hideModal() {
        this.actived = false;
        // OR this.demoModal.hide();
      }

      setType(type: string): void {
        this.modalOptions.type = type;
        this.showModal();
      }

      setSize(size: string): void {
        this.modalOptions.size = size;
        this.showModal();
      }
    }