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

（http://layer.layui.com/）

一、使用场景

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

1）作为独立组件使用

如果只是单独想使用layer，可以去layer独立版本官网（http://layer.layui.com/）下载组件包。需要在页面引入jQuery1.8以上的任意版本，并引入layer.js。通过script标签引入layer.js后，直接用即可。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用场景-单独使用layer</title>
    <!--1、需要引入jQuery1.8以上版本-->
    <script src="js/jquery.min.js"></script>
    <!--2、下载layer整个包，并引入layer.js文件-->
    <script src="plugins/layer/layer.js"></script>
</head>
<body>
    <a href="javascript:void(0)" id="btn">点我弹出</a>
    <script type="text/javascript">
        $("#btn").click(function(){
            layer.msg('hello');
        })
    </script>
</body>
</html>

2）layui 模块化使用

如果使用的是 layui，那么直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js。通过layui.use(‘layer’, callback)加载模块。

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

  layer.msg('hello');
});

二、基础参数

基础参数主要指调用方法时用到的配置项，以键值形式存在，基础参数可合理应用于任何层类型中，不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意，从2.3开始，无需通过layer.config来加载拓展模块。

1）type-基本层类型

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：

0（信息框，默认）
1（页面层）
2（iframe层）
3（加载层）
4（tips层）
注意：若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

2）title-标题

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

title支持三种类型的值：

若传入的是普通的字符串，如title :’我是标题’，那么只会改变标题文本
若还需要自定义标题区域样式，那么可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式
如果不想显示标题栏，你可以title: false

3）content-内容

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

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基础参数</title>
    <!--1、需要引入jQuery1.8以上版本-->
    <script src="js/jquery.min.js"></script>
    <!--2、下载layer整个包，并引入layer.js文件-->
    <script src="plugins/layer/layer.js"></script>
</head>
<body>
    <a href="javascript:void(0)" id="btn-1">点我弹出加载层</a>
    <a href="javascript:void(0)" id="btn-2">点我弹出信息框</a>
    <a href="javascript:void(0)" id="btn-3">点我弹出页面层</a>
    <script type="text/javascript">
        $("#btn-1").click(function(){
            layer.open({
                type:3
            });
        })
        $("#btn-2").click(function(){
            layer.open({
                type:0
            });
        })
        $("#btn-3").click(function(){
            layer.open({
                type:1
            });
        })
    </script>
</body>
</html>

4）area-宽高

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

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基础参数</title>
    <!--1、需要引入jQuery1.8以上版本-->
    <script src="js/jquery.min.js"></script>
    <!--2、下载layer整个包，并引入layer.js文件-->
    <script src="plugins/layer/layer.js"></script>
</head>
<body>

    <a href="javascript:void(0)" id="btn">点我弹出页面层</a>
    <script type="text/javascript">
        $("#btn").click(function(){
            layer.open({
                type:1,
                area:['500px','300px']
            });
        })
    </script>
</body>
</html>

5）time-自动关闭所需毫秒

类型：Number，默认：0

默认不会自动关闭。当想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基础参数</title>
    <!--1、需要引入jQuery1.8以上版本-->
    <script src="js/jquery.min.js"></script>
    <!--2、下载layer整个包，并引入layer.js文件-->
    <script src="plugins/layer/layer.js"></script>
</head>
<body>

<a href="javascript:void(0)" id="btn">点我弹出页面层</a>
<script type="text/javascript">
    $("#btn").click(function(){
        layer.open({
            type:1,
            title:false,
            area:['500px','300px'],
            content:'1234567',
            time:2000   //2000毫秒后自动关闭
        });
    })
</script>
</body>
</html>

6）anim-弹出动画

类型：Number，默认：0

出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6。如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是shift参数

anim: 0，平滑放大。默认
anim: 1，从上掉落
anim: 2，从最底部往上滑入
anim: 3，从左滑入
anim: 4，从左翻滚
anim: 5，渐显
anim: 6，抖动