菜鸟-创作你的创作

layer.open

lichongyang

layer.open 是 Layui 前端框架中，用来弹出各种弹层（弹窗、iframe、提示框等）的核心方法，在后台管理系统、表单编辑、详情页里用得非常多。

下面给你一份 一看就会用的完整说明 + 常见场景示例 👇

一、layer.open 是干什么的？

👉 创建一个自定义弹层

可以用来：

二、最基础用法

layer.open({
  type: 1,
  title: '提示',
  content: 'Hello Layer'
});

三、type 类型说明（重点）

type说明
0信息框（默认）
1页面层（HTML）
2iframe 层（常用）
3加载层
4tips 层

四、常见实战示例（直接复制可用）

1️⃣ 普通提示弹窗

layer.open({
  title: '系统提示',
  content: '操作成功'
});

2️⃣ HTML 页面层（表单 / 详情）

layer.open({
  type: 1,
  title: '编辑用户',
  area: ['500px', '300px'],
  content: $('#editForm')
});

3️⃣ iframe 弹窗（后台最常用）

layer.open({
  type: 2,
  title: '新增用户',
  area: ['800px', '500px'],
  content: '/user/add'
});

4️⃣ 全屏弹窗

var index = layer.open({
  type: 2,
  title: '详情',
  content: '/detail'
});
layer.full(index);

5️⃣ 右侧滑出弹窗

layer.open({
  type: 2,
  title: '侧边栏',
  offset: 'r',
  area: ['400px', '100%'],
  content: '/side'
});

6️⃣ 确认框（删除操作）

layer.open({
  content: '确定要删除吗？',
  btn: ['确定', '取消'],
  yes: function(index) {
    // 执行删除
    layer.close(index);
  }
});

五、常用参数速查

参数说明
title标题
area宽高，如 ['600px','400px']
content内容（HTML / URL）
shade遮罩
shadeClose点击遮罩关闭
btn按钮
yes确认回调
cancel关闭回调
offset弹出位置
maxmin最大最小化

六、父子页面通信（iframe 常见）

父页面打开

layer.open({
  type: 2,
  content: '/edit'
});

子页面关闭并刷新父页面

var index = parent.layer.getFrameIndex(window.name);
parent.location.reload();
parent.layer.close(index);

七、关闭弹窗的几种方式

layer.close(index);      // 关闭指定
layer.closeAll();        // 关闭全部
layer.closeAll('iframe');

八、常见坑（你一定会遇到）

❌ iframe 内容高度不自适应
✔ 用 area 或 layer.full()

❌ 表单在弹窗中样式错乱
✔ layui.use(['form']) 重新渲染

❌ 关闭弹窗找不到 index
✔ getFrameIndex(window.name)

九、一句话总结

layer.open = Layui 弹窗的万能入口

退出移动版