一、弹出层

1、alert 普通弹框

• layer.alert(content, options, yes)

<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.alert("灭绝师太");
        layer.alert("西门大官人",{icon: 1});
        layer.alert("欧阳克",function(){
            console.log('匿名方法');
        });
    });
</script>

2、confirm 询问框

• layer.confirm(content, options, yes, cancel)

layer.confirm("你是欧阳克吗?", { icon: 3, title: "疑问" }, function (index) {
  console.log(index);
  layer.close(index);
});

3、msg 提示框

• layer.msg(content, options, end)

layer.msg("我是欧阳克");
layer.msg("我是欧阳克", { icon: 6 });
layer.msg("我是欧阳克", function () {
  console.log("欧阳克");
});

4、load 加载层

• layer.load(icon, options)
  icon 支持传入 0-2

layer.load();
layer.load(1);
layer.load(2, { time: 2 * 1000 });

5、tips 吸附层

• layer.tips(content, follow, options)

<div style="margin: 50px" id="test">
    <div>这里显示tip提示框</div>
</div>
<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.tips("tip提示框", "#test", {
            tips: 2,
        });
    });
</script>

6、open 核心方法

• layer.open(options) 不管是使用哪种方式创建层，都是走 open()

layer.open({
  title: "标题",
  content: "我是欧阳克",
});

二、基础参数

1、信息框

<style>
    .test {
        border: 10px solid #e9e7e7;
        color: orange;
    }
</style>
<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.open({
            type: 0,
            title: "标题",
            content: "我是欧阳克",
            skin: "test",
            area: ["500px", "500px"], // area:"500px",
            offset: "lt",
            icon: 3,
            btn: ["按钮一", "按钮二", "按钮三"], //可以无限个按钮
            btn1: function (index, layero) {
                console.log("按钮一");
            },
            btn2: function (index, layero) {
                console.log("按钮二");
            },
            btn3: function (index, layero) {
                console.log("按钮三");
            },
            btnAlign: "c",
            closeBtn: 2,
            shade: 0.5,
            shadeClose: true,
            time: 1000,
            anim: 2,
            resize: true,
            success(index, layero) {
                console.log("弹出成功");
            },
            yes(index, layero) {
                console.log("点击确定按钮");
            },
            cancel(index, layero) {
                console.log("点击取消按钮");
            },
        });
    });
</script>

2、页面层

layer.open({
  type: 1,
  title: "标题",
  content:
    '<form style="margin:20px;" class="layui-form layui-form-pane" action=""><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-input-block"><input type="text" placeholder="请输入标题" class="layui-input" /></div></div></form>',
});

3、iframe 层

layer.open({
  type: 2,
  title: "欧阳克",
  content: "http://www.ouyangke.cn",
});

4、加载层

layer.open({
  type: 3,
});

5、tips 层

<div style="margin: 150px" id="test">
  <div>这里显示tip提示框</div>
</div>;
<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.open({
            type: 4,
            content: ["我是欧阳克", "#test"],
            tips: 1,
        });
    });
</script>

三、其他方法

1、关闭指定层

• layer.close(index)

var index = layer.alert("灭绝师太");
layer.close(index);

layer.open({
  type: 0,
  title: "标题",
  content: "我是欧阳克",
  yes(index, layero) {
    console.log("点击确定按钮");
    layer.close(index);
  },
});

2、最大化

• layer.full()

var index = layer.alert("灭绝师太");
layer.full(index);

layer.full(
  layer.open({
    type: 2,
    title: "欧阳克",
    maxmin: true,
    content: "http://www.ouyangke.cn",
  })
);

备：其他方法

• layer.closeAll() 关闭所有层
• layer.min() 最小化
• layer.restore() 恢复弹窗
• layer.style() 重新定义层的样式
• layer.title() 改变层的标题
• layer.iframeAuto() 指定 iframe 层自适应
• layer.iframeSrc() 重置特定 iframe url
• layer.setTop() 置顶当前窗口
• layer.getChildFrame() 获取 iframe 页的 DOM
• layer.getFrameIndex() 获取特定 iframe 层的索引

四、其他层

1、输入层

• layer.prompt(options, yes)

layer.prompt(
  {
    formType: 2, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
    value: "我是欧阳克",
    title: "请输入老师介绍",
    area: ["800px", "350px"],
  },
  function (value, index, elem) {
    console.log(value);
    layer.close(index);
  }
);

2、tab 层

layer.tab({
  area: ["600px", "300px"],
  tab: [
    {
      title: "TAB1",
      content: "灭绝师太",
    },
    {
      title: "TAB2",
      content: "西门大官人",
    },
    {
      title: "TAB3",
      content: "欧阳克",
    },
  ],
});

3、相册层

layer.photos({
  photos: {
    title: "", //相册标题
    id: 123, //相册id
    start: 1, //初始显示的图片序号，默认0
    data: [
      //相册包含的图片，数组格式
      {
        alt: "图片1",
        pid: 1, //图片id
        src: "https://img.php.cn/upload/article/000/000/003/60c034e9d3595631.jpg", //原图地址
        thumb:
          "https://img.php.cn/upload/article/000/000/003/60c034e9d3595631.jpg", //缩略图地址
      },
      {
        alt: "图片2",
        pid: 2, //图片id
        src: "https://img.php.cn/upload/article/000/000/003/6093abebf1766794.jpg", //原图地址
        thumb:
          "https://img.php.cn/upload/article/000/000/003/6093abebf1766794.jpg", //缩略图地址
      },
      {
        alt: "图片3",
        pid: 3, //图片id
        src: "https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg", //原图地址
        thumb:
          "https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg", //缩略图地址
      },
    ],
  },
  anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});