‌Layer.js 核心弹层类型及用法详解‌

‌1. 基础提示框（layer.msg()）‌

‌用途‌：显示简单提示信息（成功/警告/错误）
‌语法‌：

layer.msg('提示内容', {icon: 1, time: 2000});

‌参数说明‌：

• icon：图标类型（1=成功，2=警告，5=错误，0=无图标）

• time：自动关闭时间（毫秒）

‌示例‌：

layer.msg('操作成功！', {icon: 1});  // 显示绿色成功图标
layer.msg('警告：数据未保存！', {icon: 2});  // 显示黄色警告图标

‌效果‌：
![绿色成功提示框，2秒后自动消失]
‌原因‌：icon:1 触发系统预设的成功样式，time:2000 控制自动关闭。

---

‌2. 确认框（layer.confirm()）‌

‌用途‌：需要用户确认的操作（如删除/提交）
‌语法‌：

layer.confirm('确定要删除吗？', function(index){
  layer.close(index);  // 关闭弹层
  // 执行删除操作
});

‌示例‌：

layer.confirm('确认退出当前页面？', {
  btn: ['确定', '取消'],  // 自定义按钮文字
  yes: function(){
    window.location.href = '/logout';
  }
});

‌效果‌：
![带"确定/取消"按钮的弹窗，点击确定后跳转]
‌原因‌：yes 回调函数在用户点击"确定"时触发。

---

‌3. 自定义内容层（layer.open()）‌

‌用途‌：显示复杂内容（表单/表格/富文本）
‌语法‌：

layer.open({
  type: 1,  // 1=HTML内容
  content: '<div>自定义HTML</div>',
  area: ['500px', '300px'],
  btn: ['提交', '取消']
});

‌示例‌：

layer.open({
  type: 1,
  title: '用户信息',
  content: $('#userForm').html(),  // 动态加载表单
  btn: ['保存', '关闭'],
  yes: function(){
    // 提交表单逻辑
  }
});

‌效果‌：
![带标题和按钮的自定义弹层，内容为表单HTML]
‌原因‌：type:1 允许直接插入HTML，btn 添加操作按钮。

---

‌4. 加载层（layer.load()）‌

‌用途‌：显示异步操作进度（如AJAX请求）
‌语法‌：

var loadIndex = layer.load(1, {shade: 0.3});
// 操作完成后关闭
layer.close(loadIndex);

‌示例‌：

var loadIndex = layer.load(1, {shade: 0.3});
$.ajax({
  url: '/api/data',
  success: function(){
    layer.close(loadIndex);
  }
});

‌效果‌：
![半透明遮罩+旋转加载图标]
‌原因‌：shade:0.3 设置遮罩透明度，需手动关闭。

---

‌5. 页面层（layer.open(type:2)）‌

‌用途‌：嵌入外部页面（如登录/支付）
‌语法‌：

layer.open({
  type: 2,
  content: 'https://example.com/pay',
  area: ['800px', '600px']
});

‌示例‌：

layer.open({
  type: 2,
  title: '微信支付',
  content: 'https://pay.weixin.com',
  maxmin: true  // 允许最大化/最小化
});

‌效果‌：
![iframe弹层，显示微信支付页面]
‌原因‌：type:2 自动处理iframe高度，maxmin 添加控制按钮。

---

‌总结对比表‌

类型	调用方法	适用场景	关键参数
提示框	layer.msg()	简单反馈	icon, time
确认框	layer.confirm()	用户确认操作	btn, yes
自定义层	layer.open(type1)	复杂内容展示	content, area
加载层	layer.load()	异步操作等待	shade
页面层	layer.open(type2)	嵌入外部页面	content, maxmin

---

‌常见问题解答‌

‌Q1：如何关闭所有弹层？‌

layer.closeAll();  // 关闭所有弹层

‌Q2：如何自定义弹层样式？‌

layer.open({
  type: 1,
  content: '<div class="custom-style">自定义样式</div>',
  style: 'border: 1px solid #ccc;'  // 内联样式
});

‌Q3：如何监听弹层关闭事件？‌

layer.on('close', function(index){
  console.log('弹层已关闭');
});