实现layui扁平化无标题弹窗需三步:一设title: false并自定义skin;二用area和offset固定尺寸与居中;三传纯HTML内容。再通过CSS隐藏标题、重置内边距,或用layer.msg加自定义skin和offset微调实现真正扁平效果。

实现layui弹窗无标题栏的扁平化提示框,需绕过layer默认的title区域渲染逻辑,直接操作DOM结构或改写CSS样式,否则弹窗顶部会残留空白标题区或默认“提示”文字。
用layer.open配置禁用标题并清除边框
第一步:调用layer.open时设置title: false,彻底关闭标题栏渲染;同时将skin: 'layui-layer-demo'替换为自定义class,避免继承默认边框和阴影。
第二步:添加area: ['320px', '180px']明确宽高,防止内容撑开导致布局变形;offset: 'auto'让弹窗垂直居中,比默认top偏移更符合扁平化视觉重心。
第三步:在content中传入纯HTML字符串,不包裹<div></div>外层容器——layui会自动套一层.layui-layer-content,多套一层反而增加内边距干扰扁平感。
这一步操作起来很简单,直接把文件拖进去就行。
用CSS强制抹除标题区域残留高度
方法一:在弹窗打开后立即执行:
layer.open({ ... }); → 紧接着调用layer.style(layer.index, { 'padding-top': '0' });,消除标题隐藏后仍存在的20px上内边距。
方法二:全局覆盖layui层样式(推荐):
在页面
中插入


















