版权声明：本文为博主原创文章，转载请附上博文链接！ https://blog.csdn.net/csdnluolei/article/details/85037153
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
layer 扩展皮肤: http://layer.layui.com/skin.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer弹出层扩展自定义样式</title>
<!-- 扩展的自定义样式 -->
<link rel="stylesheet" href="../css/layerStyleExtend.css" />
</head>
<body>
<!-- jquery -->
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- leyer -->
<script type="text/javascript" src="../js/plugins/layer/layer.min.js" ></script>
<script type="text/javascript" src="../js/base.js" ></script>
<script>
//这两个弹框的样式相同
layer.alert('layer扩展样式');
//layer.alert('layer扩展样式2',{skin: 'layer-ext-fo'});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer弹出层扩展自定义样式</title>
<!-- 扩展的自定义样式 -->
<link rel="stylesheet" href="../css/layerStyleExtend.css" />
</head>
<body>
<!-- jquery -->
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- leyer -->
<script type="text/javascript" src="../js/plugins/layer/layer.min.js" ></script>
<script type="text/javascript" src="../js/base.js" ></script>
<script>
//这两个弹框的样式相同
layer.alert('layer扩展样式');
//layer.alert('layer扩展样式2',{skin: 'layer-ext-fo'});
</script>
</body>
</html>layerStyleExtend.css
/**
* layer弹层风格扩展，放在文件最前面
*/
body .layer-ext-fo .layui-layer-title{
background-color: tomato;
color: #fff;
}
body .layer-ext-fo .layui-layer-btn a{
border-color: brown;
background-color: tomato;
color: #fff;
}
base.js
/**
* layer弹层风格扩展，放在文件最前面
*/
parent.layer.config({
extend: 'fo/style.css', //extend加载新的样式
skin: 'layer-ext-fo' //设定样式，所有弹层风格都采用此主题。
});
//基础公用代码
//创建模块
//var app=angular.module("myApp", []);
