组件示例

            
              
如果需要更多资料点击下方图片加好友领取⬇（注明来意）
                    C6F20ED5-907D-4b8c-BBAE-FE609EE58292.png

弹出层

模块加载名称：layer，独立版本：layer.layui. com

使用场景

由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

场景 用前准备 调用方式
1. 作为独立组件使用 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。 通过script标签引入layer.js后，直接用即可。
2. layui 模块化使用 如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js 通过layui.use('layer', callback)加载模块

  1. 作为独立组件使用 layer

  2. 在 layui 中使用 layer

    layui.use('layer', function(){
 var layer = layui.layer;

 layer.msg('hello');
});
基础参数

  1. type - 基本层类型

    类型：Number，默认：0

可传入的值有：
0（信息框，默认）
1（页面层）
2（iframe层）
3（加载层）
4（tips层）

  2. title - 标题

    类型：String/Array/Boolean，默认：'信息'

title支持三种类型的值：
若传入的是普通的字符串，如 title :'我是标题'，那么只会改变标题文本；
若需要自定义样式，可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；
若你不想显示标题栏，可以 title: false；

  3. content - 内容

    类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM。
    /* 信息框 */
layer.open({
   type:0,
   title:"系统消息",
   // content可以传入任意的文本或html
   content:"Hello"
});

/* 页面层 */
layer.open({
   type:1,
   title:"系统消息",
   // content可以传入任意的文本或html
   content:"
    Hello
    "
});

/* iframe */
layer.open({
   type:2,
   title:"系统消息",
   // content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['url', 'no']
   content:"http://www.baidu.com"
   // content:["http://www.baidu.com",'no']
});

/* tips层 */
layer.open({
 type: 4,
 content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

  4. area - 宽高

    类型：String/Array，默认：'auto'

在默认状态下，layer是宽高都自适应的。
当定义宽度时，你可以area: '500px'，高度仍然是自适应的。
当宽高都要定义时，你可以area: ['500px', '300px']。

  5. icon - 图标

    注：信息框和加载层的私有参数。

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6。如果是加载层，可以传入0-2。
    // eg1
layer.alert('酷毙了', {icon: 1});
// eg2
layer.msg('不开心。。', {icon: 5});
// eg3
layer.load(1); // 风格1的加载

  6. 示例

    
// eg1
layer.alert('很高兴见到你