layer弹出层扩展自定义样式

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

layer弹出层扩展自定义样式相关推荐

php layer弹出层更改背景,详解Layer弹出层样式
前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...
Layer——弹出层
Layer--弹出层开发工具与关键技术:Visual Studio 前端作者:盘子撰写时间:2019年5月16 日 Layui.layer弹层组件文档,layer是layui的代表作,也只是作为 ...
php layer弹出层更改背景,layer更改皮肤的实现方法
layUI的弹出层模块layer在使用时有一个skin属性 skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名. 如果要改变弹出层的title样式或者背景之类的就 ...
Vue（二十一）Layer弹出层
安装:下载源码到本地 layer: 丰富多样的 Web 弹出层组件,可轻松实现 Alert/Confirm/Prompt/普通提示/页面区块/iframe/tips 等等几乎所有的弹出交互.目前已成为 ...
安防互联网摄像头海康大华硬盘录像机视频流媒体服务器EasyNVR在layer弹出层中使用video标签无法最大化全屏播放问题解决
诞生背景众所周知,EasyNVR可以将局域网/广域网上的海康/大华等网络摄像头由rtsp转换为rtmp.rtsp.hls.flv协议转换,并提供推流服务,可以将拉到的网络摄像头直接转发到流媒体服务器 ...
JavaScript学习笔记(九）(验证框架,layer弹出层)
JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证整体代码二.layer弹出层 1.引入相 ...
php layer弹出层更改背景,layui.layer 弹出层背景透明，前景无阴影实现方案
先上具体实现方法. 首先,在 css 里给 layer 弹出层写个自定义 skin (这点不明白的同学请出门左转 layui 官网文档):.myskin{ background-colo ...
layer弹出层组件实现加载效果
layer弹出层组件挺实用的,需要跟jQuery配合使用,下面介绍一下利用layer制作加载层. 使用layer.load() layer.load(1,{ // 0/1/2表示图标,load有三种可 ...
php layer弹出层更改背景,浅谈layer弹出层按钮颜色修改方法
layer弹出层有多种格式的弹出,使用方法也不细述. 在弹出确认框可使用confirm或open方式在open中 layer.open({ content: '确认提交?', btn: [" ...

layer弹出层扩展自定义样式

layer弹出层扩展自定义样式相关推荐

最新文章

热门文章