Angular2.0下实现的modal框

觉得写的比较巧妙的就是样式的选取~记录下

CSS部分

.font {
    font-family: "Microsoft YaHei", Arial;
    font-size: 12px;
    color: #333333;
}

.ky-modal-content {
    min-width: 520px;
    min-height: 240px;
}

.ky-modal-header {
    /*height : 40px;*/
    padding: 0 10px 0 10px;
}

.ky-modal-title {
    font-size: 16px;
    font-weight: 100;
}

.ky-modal-body {
    min-height: 110px;
    text-align: center;
}

.ky-modal-footer {
    height: 30px;
    border-top: 0;
    text-align: -webkit-center;
}

.ky-modal-message {
    padding-left: 3px;
    vertical-align: middle;
}

.ky-modal-icon {
    font-size: 16px;
    vertical-align: middle;
}

.ky-modal-question-icon {
    color:#ff8000;
}

.ky-modal-check-icon {
    color:green;
}

.ky-modal-exclamation-icon {
    color:red;
}

.ky-modal-close {
    outline: none;
    font-size: 30px;
    margin-top: 8px;
    font-weight: 100;
    vertical-align: -webkit-baseline-middle;
}
.vertical-align-center {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-align: center;
    -moz-box-align: center;
    text-align: -webkit-center;
}

HTML部分

<div [id]="id" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content ky-modal-content">
      <div class="modal-header ky-modal-header">
        <button type="button" class="close ky-modal-close" data-dismiss="modal" aria-label="Close">
          <span style="position: fixed;right: 10px;top:-6px" aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title ky-modal-title" >{{title}}</h4>
      </div>

      <div class="modal-body ky-modal-body vertical-align-center">
     
        <div>
         <span style="font-size:18px;"> <span style="color:#ff0000;"><i class="fa ky-modal-icon" [ngClass]="iconClass" aria-hidden="true"></i></span></span>
          <span class="ky-modal-message">{{message}}</span>
        </div>

      </div>
      <div class="modal-footer ky-modal-footer">   
        <ky-button [type]="conformButtonType" data-dismiss="modal" (click)="confirmButtonDown()">{{confirmText}}</ky-button>
        <ky-button [type]="'cancel'" data-dismiss="modal" (click)="cancelButtonDown()">{{cancelText}}</ky-button>
      </div>
    </div>
  </div>
</div>

JS部分

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'ky-modal',
    styleUrls: ['./ky-modal.css'],
    templateUrl: './ky-modal.component.html',
})

export class KyModalComponent implements OnInit {
    @Input() title:string = '';
    @Input() type:string = '';
    @Input() message:string = '';
    @Input() confirmText:string = '';
    @Input() cancelText:string = '';
    @Input() id:string;
    @Input() conformButtonType:string;

    iconType ='question';
    iconClass :any = {'fa-question-circle':false,
        'fa-check-circle':false,
        'fa-exclamation-circle':false};

    typeList = ['question', 'check', 'exclamation'];

    @Output() actionButtonDown = new EventEmitter();

    @Output() undoButtonDown = new EventEmitter();

    cancelButtonDown() {

      this.undoButtonDown.emit('event');
    }

    confirmButtonDown() {
        this.actionButtonDown.emit('event');
    }

    <span style="font-size:18px;color:#ff0000;">determine() {
        let that = this;
        if(that.type && _.contains(that.typeList,that.type)) {
            that.iconType = that.type;
        }
        that.iconClass[`fa-${that.iconType}-circle`] = true;
        that.iconClass[`ky-modal-${that.iconType}-icon`] = true;</span>
    }

    ngOnInit() {
        this.determine();
    }

}