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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
使用js实现数据格式化
Dec 03 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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模拟asp中response类实现方法
2015/08/08 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
扩展String功能方法
2006/09/22 Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
详解a++和++a的区别
2017/08/30 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
优秀共产党员先进事迹
2014/01/27 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
管理建议书范文
2014/05/13 职场文书
新学期标语
2014/06/30 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
工作试用期自我评价
2015/03/10 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python