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

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部分

{{message}}

{{confirmText}}

{{cancelText}}

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(sqEJOKPJy) 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;

}

ngOnInit() {

this.determine();

}

}

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。