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高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 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 设计模式之 单例模式
2008/12/19 PHP
php 执行系统命令的方法
2009/07/07 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php文件上传的简单实例
2013/10/19 PHP
php strftime函数的详细用法
2018/06/21 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
jupyter notebook清除输出方式
2020/04/10 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
python搜索算法原理及实例讲解
2020/11/18 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
导游词之苏州寒山寺
2019/12/05 职场文书