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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
jQuery cdn使用介绍
May 08 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
原生JavaScript实现进度条
Feb 19 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
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
python try...finally...的实现方法
2020/11/25 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
预备党员表决心书
2014/03/11 职场文书
洗车工岗位职责
2014/03/15 职场文书
倡议书范文
2014/04/16 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
初中教师个人总结
2015/02/10 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Mysql排序的特性详情
2021/11/01 MySQL