Home > Web Front-end > JS Tutorial > How to implement modal dialog box in Angular2.0

How to implement modal dialog box in Angular2.0

亚连
Release: 2018-06-05 17:13:52
Original
1625 people have browsed it

This article mainly introduces the method of implementing the modal dialog box in Angular2.0, and analyzes the style, interface and functions of the modal dialog box in Angular2.0 based on examples. Friends who need it can refer to it

The example of this article describes the method of implementing modal dialog box in Angular2.0. Share it with everyone for your reference, the details are as follows:

I think the more clever writing is the selection of styles ~ record the

CSS part

.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;
}
Copy after login

HTML part

<p [id]="id" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
 <p class="modal-dialog">
 <p class="modal-content ky-modal-content">
  <p 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>
  </p>
  <p class="modal-body ky-modal-body vertical-align-center">
  <p>
   <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>
  </p>
  </p>
  <p class="modal-footer ky-modal-footer">
  <ky-button [type]="conformButtonType" data-dismiss="modal" (click)="confirmButtonDown()">{{confirmText}}</ky-button>
  <ky-button [type]="&#39;cancel&#39;" data-dismiss="modal" (click)="cancelButtonDown()">{{cancelText}}</ky-button>
  </p>
 </p>
 </p>
</p>
Copy after login

JS part

import { Component, Input, Output, EventEmitter, OnInit } from &#39;@angular/core&#39;;
@Component({
 moduleId: module.id,
 selector: &#39;ky-modal&#39;,
 styleUrls: [&#39;./ky-modal.css&#39;],
 templateUrl: &#39;./ky-modal.component.html&#39;,
})
export class KyModalComponent implements OnInit {
 @Input() title:string = &#39;&#39;;
 @Input() type:string = &#39;&#39;;
 @Input() message:string = &#39;&#39;;
 @Input() confirmText:string = &#39;&#39;;
 @Input() cancelText:string = &#39;&#39;;
 @Input() id:string;
 @Input() conformButtonType:string;
 iconType =&#39;question&#39;;
 iconClass :any = {&#39;fa-question-circle&#39;:false,
  &#39;fa-check-circle&#39;:false,
  &#39;fa-exclamation-circle&#39;:false};
 typeList = [&#39;question&#39;, &#39;check&#39;, &#39;exclamation&#39;];
 @Output() actionButtonDown = new EventEmitter();
 @Output() undoButtonDown = new EventEmitter();
 cancelButtonDown() {
  this.undoButtonDown.emit(&#39;event&#39;);
 }
 confirmButtonDown() {
  this.actionButtonDown.emit(&#39;event&#39;);
 }
 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();
 }
}
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JQuery selects the selected value method of the select component

$set and array update method in vue.js_ vue.js

Vue and vue-i18n are combined to implement multi-language switching method of background data

The above is the detailed content of How to implement modal dialog box in Angular2.0. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template