全屏弹窗需设area: ['100%', '100%']和closeBtn: 0,禁用右上角按钮并确保宽高满屏;必须提供替代关闭方式(如内置按钮或esc: true),并注意zIndex不被覆盖。
全屏弹出时右上角关闭按钮必须隐藏,否则会遮挡内容或破坏沉浸感。直接设 closebtn: 0 就行,但要注意它和 maxmin、resize 等参数的协同关系。
全屏弹出必须用 area: ['100%', '100%'],不能只写 '100%'
Layui 的 area 参数接受字符串或数组。单写 '100%' 只设置宽度,高度仍为默认自适应(通常很窄),根本不是全屏。必须显式传数组:
layer.open({
type: 1,
content: '<div>全屏内容</div>',
area: ['100%', '100%'], // ✅ 正确:宽高都拉满
closeBtn: 0 // 隐藏右上角 X
});
- 若误写为
area: '100%',弹窗只会铺满宽度,高度可能只有几十像素,closeBtn: 0虽生效,但视觉上仍是“小弹窗+无关闭按钮”,并非预期效果 -
offset: 'auto'在全屏下无效,无需设置;坐标由area决定
closeBtn: 0 是唯一可靠方式,别用 jQuery hide()
网上有方案用 $(...).next().hide() 或 CSS 隐藏,这类操作在全屏场景下极易失效:
- 全屏时 DOM 结构可能因渲染时机变化,
.next()找不到按钮容器 - Layer 会在
success回调后再次重绘按钮区域,手动 hide() 可能被覆盖 -
closeBtn: 0是 Layer 内部逻辑控制,从 DOM 树源头不生成该节点,彻底干净
全屏 + 隐藏关闭按钮后,必须提供替代关闭路径
用户无法点右上角、不能按 Esc(除非你开 esc: true)、也不能点遮罩(除非你开 shadeClose: true)——此时若没留其他出口,弹窗就真关不掉了:
- 务必在内容里放一个明确的关闭按钮:
<button onclick="layer.close(layer.index)">退出全屏</button> - 或监听键盘事件,比如监听
Escape键:esc: true(注意:这和closeBtn: 0不冲突) - 若内容是 iframe,需确保子页面能调用
parent.layer.close(parent.layer.index)
最容易被忽略的是:全屏弹窗的 zIndex 默认值(19891014)可能被某些全局样式或第三方组件覆盖,导致关闭按钮虽已隐藏,但底层元素(比如 fixed 导航栏)仍盖在弹窗上。遇到点击无响应,先检查 computed zIndex 是否真的生效。


















