需绕过layui默认标题栏,用skin自定义注入html:第一步设title:false、closebtn:0、skin:'mac-dot';第二步success中清空并append三色圆点;第三步css定位+事件绑定,红点关闭、黄点最小化(需自行实现)、绿点仅视觉;注意拖拽时圆点加pointer-events:none。

实现Layui弹窗顶部出现红黄绿三色圆点按钮,需绕过默认标题栏结构,用自定义skin注入HTML并精准控制定位与交互逻辑。
替换默认标题栏为Mac风格圆点
第一步:在layer.open中设置skin和title为空,并禁用原生关闭按钮:【title: false, closeBtn: 0, skin: 'mac-dot'】。
第二步:在success回调中,用jQuery动态插入三色圆点HTML到layero.find('.layui-layer-title')位置,注意必须先清空原有标题内容再append。
第三步:给三个元素分别添加class="mac-dot-red"、"mac-dot-yellow"、"mac-dot-green",并用CSS绝对定位贴紧左上角,宽度高度设为12px,border-radius:50%。
让圆点具备点击功能
方法一:为每个圆点绑定click事件——红点调用layer.close(index),黄点调用layer.min(index)(需引入layim或自行模拟最小化),绿点不做操作仅作视觉标识。
方法二:用事件委托监听整个标题区域,通过event.target.className判断点击的是哪个圆点,避免重复绑定。
注意:Layui未提供原生min方法,【layer.min(index)会报错,必须自己实现DOM隐藏+状态标记】,否则点击黄点无响应。
样式细节处理
给.mac-dot-red等类加background-color:#ff5f56、#ffbd2e、#28c940,同时设置box-shadow: 0 1px 2px rgba(0,0,0,.2)增强立体感。
标题栏整体高度需手动设为32px,否则圆点会被挤压变形;.layui-layer-title要设padding-left: 40px,为圆点留出空间。
如果弹窗开启拖拽(move: '.layui-layer-title'),必须把圆点区域从可拖拽范围排除,否则拖动时会误触——给圆点加pointer-events: none,但文字区域仍保留拖拽能力。











