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


Posted in Javascript onFebruary 18, 2018

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
js内置对象 学习笔记
Aug 01 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 #Javascript
Vue底层实现原理总结
Feb 17 #Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 #Javascript
图文介绍Vue父组件向子组件传值
Feb 17 #Javascript
JavaScript异步加载问题总结
Feb 17 #Javascript
js装饰设计模式学习心得
Feb 17 #Javascript
Vue组件库发布到npm详解
Feb 17 #Javascript
You might like
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Numpy中的mask的使用
2018/07/21 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Pycharm调试程序技巧小结
2020/08/08 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
《三峡》教学反思
2014/03/01 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
小学教师培训方案
2014/06/09 职场文书
保证书格式
2015/01/16 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
MySQL索引失效场景及解决方案
2022/07/23 MySQL