npm install ngx.superlayer
可以把NgLayer 看作是一个弹出层的factory。NgLayer能够生成五种类型的弹层，分别对应五个方法(参数具体含义请看代码注释):
dialog(config:LayerConfig):NgxLayerRef，可以用自定义的ComponentClass定义对话框的内容alert(config:LayerConfig):NgxLayerRef，创建alert弹窗，解决原生弹窗不好看或者和网站风格不搭confirm(config:LayerConfig):NgxLayerRef，创建confirm弹窗,解决原生弹窗不好看或者和网站风格不搭tip(config:LayerConfig):NgxLayerRef，生成一个消息提示弹层loading(config:LayerConfig):NgxLayerRef，生成一个提示加载中（等待）的弹层export class NgxLayer {
/**
* open a dialog window
* @return {NgxLayerRef}
*/
public dialog(config:LayerConfig):NgxLayerRef
/**
* open a alert window
*
* @return {NgxLayerRef}
*/
public alert(config:LayerConfig):NgxLayerRef
/**
* open a confirm window
*
* @return {NgxLayerRef}
*/
public confirm(config:LayerConfig):NgxLayerRef
/**
* open a message layer
*
* @return {NgxLayerRef}
*/
public tip(config:LayerConfig):NgxLayerRef
/**
* open a loading layer
*
* @return {NgxLayerRef}
*/
public loading(config:LayerConfig):NgxLayerRef
}
NgxLayerRef 是对弹出层的一个引用，通过这个引用，可以对弹出层进行操作或者指定事件的回调函数 包含如下方法(参数具体含义请看代码注释):
close():void，关闭弹层，对所有类型的弹出层有效showCloseBtn(show:boolean)，是否显示关闭按钮，只对dialog有效setTitle(title:string):NgxLayerRef，设置弹窗的标题，只适用于dialogsetMessage(message:string):NgxLayerRef，提示消息，对除了dialog之外的弹层有效setOkText(ok:string):NgxLayerRef，更改“确定”按钮的文本，对alert、confirm有效setCancelText(cancel:string):NgxLayerRef，更改“取消”按钮的文本，对confirm有效setOnClose(callBack:()=>boolean):NgxLayerRef，设置弹层被关闭时候的回调函数，所有类型的弹层有效ok(okCallback:()=>boolean):NgxLayerRef，设置弹层“确定”按钮被点击时的回调函数，对alert、confirm有效cancel(cancelCallback:()=>boolean):NgxLayerRef，设置弹层“取消”按钮被点击时的回调函数，对confirm有效export class NgxLayerRef {
/**
* destory the layer.
*/
close()
/**
* show close button or not
*/
showCloseBtn(show:boolean):NgxLayerRef
/**
* update dialog title. for dialog only
*
* @return {NgxLayerRef}
*/
setTitle(title:string):NgxLayerRef
/**
* update message of layer
*
* e.g.
*
* ```typescript
* let tip = this.ly.tip("保存成功", 1000, "top", "warn");
* setTimeout(()=>{
* lyRef.setMessage("successfully saved").setTipType("success");
* lyRef.close();
* }, 2000);
*
* ```
* @return {NgxLayerRef}
*/
setMessage(message:string):NgxLayerRef
/**
* if the callBack return ture, the layer will be closed
*
* e.g.
*
* ```typescript
* let lyRef = this.ly.confirm("are you sure?", "yes", "no");
* lyRef.setOnClose(()=>{
* if(...) return true;
* });
* ```
* @return {NgxLayerRef}
*/
setOnClose(callBack:()=>boolean):NgxLayerRef
/**
* update "ok" button text, for alert layer or confirm layer
*
* e.g.
*
* ```typescript
*let lyRef = this.ly.confirm("are you sure?", "yes", "no");
*lyRef.setOkText("sure");
* ```
* @return {NgxLayerRef}
*/
setOkText(ok:string):NgxLayerRef
/**
* update "cancel" button text, for confirm layer only
*
* e.g.
*
* ```typescript
*let lyRef = this.ly.confirm("are you sure?", "yes", "no");
*lyRef.setCancelText("not sure");
* ```
* @return {NgxLayerRef}
*/
setCancelText(cancel:string):NgxLayerRef
/**
* okCallback called on 'ok' button click. for alert layer or confirm layer
*
* e.g.
*
* ```typescript
*let lyRef = this.ly.confirm("are you sure?", "yes", "no");
*lyRef.ok(()=>{
* ...do something...
* });
* ```
* @return {NgxLayerRef}
*/
ok(okCallback:()=>boolean):NgxLayerRef
/**
* cancelCallback called on "cancel" button click. for confirm layer only
*
* e.g.
*
* ```typescript
*let lyRef = this.ly.confirm("are you sure?", "yes", "no");
*lyRef.ok(()=>{
* ...do something...
* });
* ```
*
* @return {NgxLayerRef}
*/
cancel(cancelCallback:()=>boolean):NgxLayerRef
}
LayerConfig 是弹出层的配置类
parent:any，dialog的父组件，如果定义了parent，dialog内部的组件将成为parent的子组件，否则成为根组件dialogComponent:any，dialog 内容部分的Component 类data:Object，需要传递到dialogComponent内的参数可以在此声明，传递进来的数据要在Component完全初始化完毕之后才生效title:string，dialog的标题closeAble:boolean，dialog是否显示关闭按钮message:string，tip,loading,alert,confirm弹层的提示文字okText:string，确定按钮的文本cancelText:string，取消按钮的文本align:string，定义 loding和tip弹层的位置，可选值有：top, center, bottomisModal:boolean，是否模态，只适用于loading 弹层tipDuration:number，tip 弹层的持续时间， 经过指定的时间之后，弹层会自动关闭，单位：毫秒(ms)inSelector:string，配置弹层弹出时候的转场效果，实际上是为弹层指定一个class选择器，默认提供可选的值有：rollIn, fallDown, fadeInDown, runIn, bounceIn, splatIn, dropDown, vanishIn, spaceIn, jelly, fadeInUp,outSelector:string，配置弹层关闭时候的转场效果，实际上是为弹层指定一个class选择器，以便运用动画。默认提供可选的值有：rollOut, fadeOutDown, bounceOut, vanishOut, spaceOut, boingOut, fadeOutDownexport class LayerConfig {
/**
* the new component will be a child of parent, if parent is null,
* new component will be a root component of application.
* valid only for dialog leyer
*/
parent?:any;
/**
* if you want to use some custom directive in your dynamic component,
* don't forget to import
*/
imports?:Array<any>;
/**
* datas pass to dialog component
*/
data?:any;
/**
* dialog title
* valid only for dialog leyer
*/
title?:string;
/**
* show close button or not.
* valid only for dialog leyer
*/
closeAble?:boolean;
/**
* message type of tip layer.
* valid for alert, confirm, tip, loading leyer
*/
message?:string;
/**
* text of "ok" button.
* valid for alert or confirm leyer
*/
okText?:string;
/**
* text of "cancel" button
* valid only for confirm leyer
*/
cancelText?:string;
/**
* position of the layer("top", "center", "bottom"), default to "top"
* valid only for loading or tip leyer
*/
align?:string;
/**
* modal window or not
* valid only for loading leyer
*/
isModal?:boolean;
/**
* layer will be automatic closed after duration(ms)
* valid only for tip leyer
*/
tipDuration?:number;
/**
* defined a popup animation by a class selector
* valid for all type leyer.
*
* existing options:
* rollIn, fallDown, fadeInDown, runIn, bounceIn,
* splatIn, dropDown, vanishIn, spaceIn, jelly, fadeInUp,
*/
inSelector?:string;
/**
* defined a closeing animation by a class selector
* valid for all type leyer.
*
* existing options:
* rollOut, fadeOutDown, bounceOut, vanishOut, spaceOut,
* boingOut, fadeOutDown
*/
outSelector?:string;
}
talk is cheape, show you my code
import css
<link rel="stylesheet" href="node_modules/ngx.superlayer/css/dialog.css" />
use it
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {NgxLayer, NgxLayerRef, NgxLayerComponent} from "../../ng2-layer.js";
@Component({
selector: '.app',
templateUrl: 'temp/app.html',
providers: [NgxLayer]
})
export class AppComponent {
constructor(private ly:NgxLayer) {}
config:any = {
inSelector:"fallDown",
outSelector:"rollOut",
title:"angular2 layer",
align:"top",
parent: this,
dialogComponent:DialogComponent,
closeAble: false
}
dialog(){
this.ly.dialog(this.config);
}
alert(){
this.ly.alert(this.config);
}
confirm(){
this.ly.confirm(this.config);
}
loading(){
let tip = this.ly.loading(this.config);
setTimeout(()=>{tip.close();}, 2000)
}
tip(){
this.ly.tip(this.config);
}
}
/*component for dialog*/
@Component({
selector: '.dialog',
templateUrl: 'temp/dialog.html'
})
export class DialogComponent {
data = "angular2 layer";
constructor(private ly:NgxLayerRef, private l:NgxLayer) {}
setTitle(){this.ly.setTitle("Ngx Layer Title");}
close(){this.ly.close();}
showCloseBtn(){this.ly.showCloseBtn(true)};
showData(){alert(this.data)};
}
@NgModule({
imports: [BrowserModule],
entryComponents:[NgxLayerComponent, DialogComponent],
declarations: [AppComponent, NgxLayerComponent, DialogComponent],
bootstrap: [AppComponent]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="../css/dialog.css" />
<link rel="stylesheet" href="css/index.css" />
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.min.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch();
</script>
</head>
<body>
<div class="app">loaing...</div>
</body>
</html>
template of app Component
<button (click)="dialog();">dialog</button>
<button (click)="confirm();">confirm</button>
<button (click)="alert();">alert</button>
<button (click)="loading();">loading</button>
<button (click)="tip();">tip</button>
template of dialog Component
<style>
<style>
.dialog_body{
width:350px;
padding:0 50px;
text-align:center;
}
.dialog_logo img{
height:80px;
width:80px;
display:block;
margin:0 auto;
}
.dialog_logo h1{
font-size:30px;
line-height:1em;
color:#000;
font-weight:200;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.dialog_logo p{
margin:20px 0;
color:#000;
text-shadow:0 1px 0 rgba(204, 204, 204, 0.4);
}
.dialog_body button{
font-size:18px;
}
</style>
<div class="dialog_body">
<div class="dialog_logo">
<img src="image/logo.png"/>
<h1>Ngx Layer</h1>
<p>Angular2 弹层插件，灵活，简单，丰富，优美</p>
</div>
<button (click)="setTitle();">setTitle</button>
<button (click)="showCloseBtn();" style="margin:0 10px;">showCloseBtn</button>
<button (click)="showData();">showData</button>
</div>
code is cheape, here is the live demo