怎么自定义layer.open弹窗的样式？

1、首先来看layer弹窗的引用

下面是 layer 弹窗的 js，注意看skin ：'自定义'，都是通过 skin 的 CSS 来自定义样式。 1） layer 有内置的 skin 有：layui-layer-lan，layui-layer-molv；可以直接使用；

layer.open({ type:1, offset:['120px','850px'] , title:"入库完成信息", shade: 0, //遮罩透明度 maxmin: true, //允许全屏最小化 anim: 5, //0-6的动画形式，-1不开启 area: ['350px', '340px'], //宽高 resize:true, //允许被拉伸 skin: 'layerdemo', //注意这里，靠这个css自定义样式！！！！！ scrollbar: false, //禁止滚动条 或者 弹窗页面》=页面大小，就没有滚动条)) content:$('#inmessage'), }) };

2、通过layer.open弹窗的skin来定义CSS

注意点： 1）.layerdemo是自定义的，随便起 2）.layui-layer-title 是 layer 定义的，表示标题栏，不可修改； 3）.layui-layer-btn 也是layer定义的，不可修改，表示按钮；

body .layerdemo{ //设置弹窗的整体 border-radius: 10px; color:black; } body .layerdemo .layui-layer-title{ //设置弹窗的头部（标题栏） background:red; } body .layerdemo .layui-layer-btn{border-top:1px solid #E9E7E7} body .layerdemo .layui-layer-btn a{background:#333;} body .layerdemo .layui-layer-btn .layui-layer-btn1{background:#999;}

3、举例：设计 layer.open 弹窗样式为圆角

如下图，弹窗的样式：

自定义的 css ：

body .layerdemo{ border-radius: 20px; } body .layerdemo .layui-layer-title{ border-radius: 20px 20px 0 0; }

就可以实现了。

---

推荐看下layer官网关于 skin 说明： https://www.layui.com/doc/modules/layer.html#skin