layer弹出层扩展自定义样式

最新推荐文章于 2023-11-09 14:27:31 发布

csdnluolei

最新推荐文章于 2023-11-09 14:27:31 发布

阅读量8.2k

点赞数

分类专栏：【LayUi】文章标签： layer

本文链接：https://blog.csdn.net/csdnluolei/article/details/85037153

版权

【LayUi】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

官网 http://layer.layui.com/

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", []);