Angular2.0实现modal对话框的方法示例

本文实例讲述了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');
 }
 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();
 }
}

更多关于angularjs相关内容感兴趣的读者可查看本站专题：《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》

希望本文所述对大家angularjs程序设计有所帮助。