layer.open

layer 弹出层有 5 种，使用 type（number） 配置参数来指定分类。

• 0 - 信息层，默认
• 1 - 页面层
• 2 - iframe层
• 3 - 加载层
• 4 - tips层

信息提示框

信息提示框弹出层一般用于用户操作提示，比如提示用户操作成功还是失败。

layer.open({
    type:0, // 默认就是0，所以可以省略
    content:'我是信息提示弹出层',
    icon:1
})

layer 针对信息提示弹出层，提供了简化版函数，例如 msg 和 alert。

// 默认样式以灰色为背景，不带icon图标，3秒之后自动消失。
layer.msg('我是信息提示框');
// 自定义样式以及消失时间
layer.msg('操作成功!', {icon: 6, time: 2000});

关于 icon 不同的值显现不同的图标，icon 如果在信息提示弹出层值可以传入0-6，*如果是加载层可以传入0-2，icon与图标对应关系如下：

页面层弹框

页面层弹框对应 type 为 1。该类型无法应用 icon 图标。

// content支持普通文本、html和DOM
layer.open({
  type:1,
  content:"<h3 style='margin:20px'>我是页面层，content支持普通文本、html、DOM</h3>",
  btn:["取消"]
})

iframe弹出层

iframe 弹出层用于在弹出层加载 iframe 网页，type 为 2。

layer.open({
  type:2,
  content:"https://www.baidu.com",
  area:['500px','300px']
})

加载层（过渡动画）

加载层一般用于提示用户数据正在加载，当页面数据加载比较慢时，加载层能够以友好的方式提示用户。

一般只需要 type 参数即可，type 为 3。

layer.open(
     type:3
});     

tips层

用于在某个 dom 上提示一些信息，type 为 4。

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

综合案例

var X = $(this).offset().top;  //获取当前元素x坐标
var Y = $(this).offset().left; //获取当前元素y坐标
layer.open({
  // 基本层类型：0（信息框，默认）1（页面层）2（iframe层，也就是解析content）3（加载层）4（tips层）
  type: 1,
  title: "标题",
  // 当type: 2时就是url
  content: "内容/url",
  // 宽高：如果是100%就是满屏
  area: ['733px', '450px'],
  // 坐标：auto（默认坐标，即垂直水平居中）
  offset: 'auto',  // [ X-20, Y-100]
  // 按钮：按钮1的回调是yes（也可以是btn1），而从按钮2开始，则回调为btn2: function(){}，以此类推
  btn: ['按钮1', '按钮2'],
  // 关闭按钮：layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则0
  closeBtn: 1,
  // 遮罩：默认：0.3透明度的黑色背景（'#000'）
  shade: 0.3,
  // 是否点击遮罩关闭：默认：false
  shadeClose: false,
  // 自动关闭所需毫秒：默认：0不会自动关闭
  time: 0,
  // 最大最小化：默认：false
  maxmin: false,
  // 固定：默认：true
  fixed: true,
  // 是否允许拉伸：默认：true
  resize: true,
  // 层叠顺序：默认：19891014，一般用于解决和其它组件的层叠冲突
  zIndex: 19891014,
  // 层弹出后的成功回调方法：layero前层DOM，index当前层索引
  success: function (layero, index) {
  },
  // 第一个按钮事件，也可以叫btn1
  yes: function (index, layero) {
  },
  btn2: function (index, layero) {
    layer.close(index);
  },
  // 右上角关闭按钮触发的回调：默认会自动触发关闭。如果不想关闭，return false即可
  cancel: function (index, layero) {
    if (layer.confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
      layer.close(index);
    }
    return false;
  },
  // 层销毁后触发的回调：无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
  end: function () {
  },
  // 最大化后触发的回调：携带一个参数，即当前层DOM
  full: function (layero) {
  },
  // 最小化后触发的回调：携带一个参数，即当前层DOM
  min: function (layero) {
  },
  // 还原后触发的回调：携带一个参数，即当前层DOM
  restore: function (layero) {
  },
});

layer.confirm

一般用于当用户做一些删除修改操作或询问问题时提示用户去确认。

案例1

layer.confirm('是否确认注销登录？', function () {
  console.log("已注销")
});

案例2

layer.confirm('您是如何看待前端开发？', //弹出框内容，支持html
  {
    title: '提示',
    icon: 3,
    btn: ['重要', '奇葩', '...'] // 按钮,可以有多个
  },
  function () { // 第1个按钮回调
    layer.msg('的确很重要', {icon: 1});
  },
  function () { // 第2个按钮回调
    layer.msg('也可以这样', {
      time: 20000, // 20s后自动关闭
      btn: ['明白了', '知道了']
    });
  },
  function () { // 第...个按钮回调

  }
);

layer.prompt

prompt 的参数也是向前补齐的。options 不仅可支持传入基础参数，还可以传入 prompt 专用的属性。

{
  formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
  value: '', //初始时的值，默认空字符
  maxlength: 140, //可输入文本的最大长度，默认500
}

案例1

layer.prompt(function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});

案例2

layer.prompt({
  formType: 2,
  value: '初始值',
  title: '请输入值',
  area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});