maxmin: true仅对type: 1/2生效,控制右上角按钮显隐;双击标题栏需手动绑定事件;自动最大化须在success回调中延时调用;full/restore回调仅由按钮或显式调用触发。
maxmin: true 是开启按钮的唯一开关
只对 type: 1(页面层)和 type: 2(iframe 层)生效,其他类型如 type: 0、type: 3 设了也无效。它不控制行为,只决定右上角是否显示那两个按钮。
必须显式配置:maxmin: true
否则即使调用 layer.max() 或点击标题栏,UI 上也没有入口。
- 按钮图标状态由 layui 内部维护,不要手动增删
.layui-layer-max类 - 如果弹窗初始化时
area用了百分比(如['90%', '80%']),还原后尺寸大概率错位——这是已知缺陷,应改用固定像素值,例如['1200px', '700px'] - 不要在
success回调里提前移除.layui-layer-min元素,否则最小化按钮不可点,full/restore回调也不会触发
双击标题栏最大化需手动绑定事件
layer.open 默认完全不监听标题栏双击,这不是 bug,是设计如此。必须在 success 回调中操作 DOM:
layer.open({ ... success: function(layero, index) { const titleEl = layero.find('.layui-layer-title'); titleEl.off('dblclick').on('dblclick', function() { layero.hasClass('layui-layer-max') ? layer.restore(index) : layer.max(index); }); } });
- 务必用
layero.find(),不能直接$('.layui-layer-title'),否则可能选中其他已打开的 layer 标题 - 必须加
.off('dblclick'),避免重复 open 后事件叠加,导致一次双击触发多次max -
layer.max()和layer.restore()必须传入当前index,传错或传undefined会静默失败 - 移动端别做这个:双击默认缩放页面,且 touchend 模拟极易误触发,体验反而更差
延时自动最大化要卡准渲染时机
想“打开后 1 秒自动最大化”,不能写 setTimeout(() => layer.maximize(), 1000) —— 这会因 DOM 未就绪而报 Cannot read property 'maximize' of undefined。
可靠做法是在 success 回调内加小延迟:success: function(layero, index) { setTimeout(() => layer.maximize(index), 80); }
- 50–100ms 足够覆盖绝大多数渲染延迟;超过 300ms 用户能明显看到“先弹出、再撑满”的跳变
- 若弹窗含 iframe,建议延时提到 200ms,并监听
iframe.onload后再调layer.maximize - 不要用
layer.index替代success的第二个参数index,前者可能被后续layer.msg等覆盖
full / restore 回调不是监听器,而是按钮触发副产物
这两个回调只在 maxmin: true + type: 1 或 type: 2 时有效,且仅由点击按钮或显式调用 layer.full(index) 触发,不是 DOM 变化监听。
签名固定为:full: function(layero, index) { ... }restore: function(layero, index) { ... }
-
restore触发时,DOM 坐标尚未回滚完成,此时直接layero.css({top: 0})很可能被 layui 内部逻辑覆盖 - iframe 子页对父页的
full无感知,需手动通信:子页暴露window.onLayerResize = () => { /* 重排 */ },父页通过layero.find('iframe')[0].contentWindow.onLayerResize()调用 - 如果
restore没执行,优先检查type是否为 0 或 3,再确认右上角按钮 DOM 是否还存在
真正难的从来不是调用那几个函数,而是状态同步时机、body overflow 切换、多层弹窗下的 index 隔离,以及 iframe 内容重绘的等待策略。这些细节不处理好,功能看似跑通,实际一上生产就露馅。











