layer

1.1、layer简介

是什么 ?	`:`	丰富多样的 Web 弹出层组件，可轻松实现 Alert/Confirm/Prompt/普通提示/页面区块/iframe/tips等等几乎所有的弹出交互。
开发语言	`:`	JavaScript
官方主页	`:`	http://layer.layui.com
源码仓库	`:`	https://github.com/sentsin/layer

1.2、通过开源CDN引入layer

BootCDN⤵︎

<link  href="https://cdn.bootcdn.net/ajax/libs/layer/1.8.5/skin/layer.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/layer/1.8.5/layer.min.js">

1.3、通过下载到本地引入layer

step1、通过包管理器安装layer

包管理器	安装命令
bower	`bower install layer --save`
npm	`npm install layer --save`
yarn	`yarn add layer`

step2、进入layer目录，并查看它的内容

.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── bower.json
├── gulpfile.js
├── package.json
├── src
│   ├── README.md
│   ├── layer.js
│   ├── mobile
│   │   ├── README.md
│   │   ├── layer.js
│   │   └── need
│   │       └── layer.css
│   └── skin
│       └── default
│           ├── icon-ext.png
│           ├── icon.png
│           ├── layer.css
│           ├── loading-0.gif
│           ├── loading-1.gif
│           └── loading-2.gif
└── test
    └── demo.html

下载下来的只是源代码，我们如果用于生产环境，最好进行构建，然后使用构建后的代码，因为构建会进行代码的压缩。

step3、通过npm安装该项目的所有依赖

npm install

step4、通过gulp进行构建

gulp

step5、在HTML代码中引入CSS和JavaScript

<link  href="/bower_components/layer/build/skin/default/layer.css" rel="stylesheet">
<script src="/bower_components/layer/build/layer.js"></script>

1.4、使用layer

下面的是一个简单的使用示例：

layer.alert('注册成功', {
    skin: 'layui-layer-molv',  //样式类名
    closeBtn: 0,
    shift: 2 //动画类型
}, function () {
    location.href = '/';
});

详细使用说明，请参看官网。