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

包管理器安装命令
bowerbower install layer --save
npmnpm install layer --save
yarnyarn 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代码中引入CSSJavaScript

<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 = '/';
});

详细使用说明,请参看官网