内置模块之弹出层

1、基本使用

layer是一款近年来备受青睐的web弹层组件。

layer可以独立使用，也可以通过Layui模块化使用。

• layer独立使用时，先下载组件包（官方下载地址：[https://layer.layui.com/] (https://layer.layui.com/)）然后在页面引入jQuery1.8以上的任意版本和layer.js即可使用。
• layui 模块化使用，只需要声明layer模块即可（前提是layui .css、layui.js引入完成）。

2、弹层样式

layui提供的样式非常多，下面只介绍了几种样式的使用，更多可参考官网 https://layer.layui.com/。

基本使用方法：layer.样式名（'内容'，{参数。。。}）,适用于大部分样式。

---

• 弹窗层（layer.alert （））

image.png

• 询问层（layer.confirm（））

所谓的询问层就是添加了按钮供你选择，不同的按钮对应着不同的函数，注意括号！！！，嵌套了几层之后，括号个数很容易把人搞蒙！

image.png

• tips层（layer.tips（））

tips可以需要绑定具体元素（#id、.class），可以更改颜色和出现的位置。

image.png

    
        
        
    
    
    
    
    
    
        

            我是被绑定的元素，tips出现在我的上方
        
    

• 提示层（layer.msg（））

image.png

• 加载层（layer.load（））

一共有三种加载风格，0、1、2。

image.png

3、基础参数

layui提供了很多参数，方便我们完善弹窗的功能和美化样式，下面列举了几个参数，提供参考，详细请看官网文档https://www.layui.com/doc/modules/layer.html。
layer.样式名（'内容'，{参数。。。}）这些属性写在{ }内即可，用逗号分隔。

• 面积（area）
  area: ['500px', '300px'], //设置宽和高 , area：100px，只定义宽高度自适应

• 持续时间（time）
  time:3000, //持续时间

• 图标（icon）
  icon:6,
  

  图标对应数字.png

• 样式（skin）
  样式也可以自设计，具体就看文档吧！，下面是layer自带的两款样式。
  skin: 'layui-layer-molv', //layui-layer-lan（墨蓝色）、layui-layer-molv（墨绿色）
  

  image.png

• 关闭按钮（closeBtn）
  closeBtn: 1 ,//关闭按钮 0：无、 1：x、 2：⚪+x
  

  image.png

• 弹出动画（anim）
  anim:1, //1~6是动画，不想显示就设置-1
  

  image.png

栗子：

image.png