layui 弹框外观美化

layui前端框架以其便利易上手且拥有众多插件著称。今天准备对layui的弹框做一个外观美化。

一、效果对比：

美化后效果：

美化前的layui默认效果如下：

相比之下，美化后的弹框更加的扁平化。

二、思路

1、中间的内容不需要动
2、主要做的改动是对标题区的背景色，标题前的边框，右上角的X号、外边框的圆角和标题区与内容区的1px的分割线

三、样式修改

写一个修改标题的css样式

/*标题的css样式*/
.dialog-title{
	border: 1px solid #4DA1FF;
	margin-left: 30px;
	margin-top: 22px;
}

直接在调用layui弹框后的js中加上修改样式代码（下面的js可直接复制使用）

$("#btn-id").click(function(){
	layer.open({
	    type: 2,
	    title: '新增培训计划',
	    area: ['380px','450px'], //宽高
	    fix: false, //不固定
	    maxmin: false,
	    content: 'your url'
	});
	// 修改弹框样式如下
	$(".layui-layer-title").addClass("year-plan-add-dialog");
	$(".layui-layer-title").css("background-color","#fff");
	$(".layui-layer-title").css("font-size","16px");
	$(".layui-layer-title").css("height","18px");
	$(".layui-layer-title").css("line-height","18px");
	$(".layui-layer-title").css("border-width","0px 0px 0px 4px");
	$(".layui-layer-setwin").addClass("layui-hide");// 隐藏X号
	$(".layui-layer-iframe").css("border-radius","8px");// 设置圆角
})