如何更改layui弹出层样式

首先引入插件：

js:

<script src="./layui/src/layui.js"></script>

然后设置layui弹出层内容：

    layer.open({skin: 'alert-skin',//弹出层皮肤，可自定义也可用官方title: ['导出字段选择', 'color:rgb(139, 181, 219);'],//弹出层title,数组右半部份设置title样式area: 'auto',maxWidth: 800,// maxHeight:1000,btn: ['确认导出', '取消'],//设置底部按钮btn1: function () {},//content为弹出层内容content: "<table class='table2'><tr><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>姓名</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>身份证号</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>性别</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>出生日期</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>户籍地址</label></td></tr><tr><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>计生情况</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>单位名称</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>保险号</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>起始年月</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>截至年月</label></td></tr><tr><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>身份</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>缴费档次</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>实缴金额</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>缴费时间</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>100</label></td></tr><tr><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>状态</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>已迁出</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>户名</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>卡号</label></td><td> <input type='checkbox' value='a' id='checkbox'/><label for='checkbox'>开户行</label></td></tr></table><div class='table2-line'></div>"});

设置layui的样式，这里以button为例子：

css:

  .alert-skin .layui-layer-btn0 {height: 30px;text-align: center;color: white;font-size: 12px;border-radius: 5px;width: 110px;}

注：这里layui-layer-btn0是弹出层下方的第一个按钮，它的类名是官方定义好的，由于直接按钮直接以 btn:['确认导出'，'取消']的方式定义，我们无法定义button的类名，所以要改变按钮的样式就直接在css中用该类名更改。

如何更改layui弹出层样式相关推荐

php layer弹出层更改背景,详解Layer弹出层样式
前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...
layui弹出层：皮肤扩展（文档解读）
layui弹出层:皮肤扩展(文档解读) layui弹出层:样式自定义官方文档:https://layer.layui.com/ 皮肤扩展 · 官方教程: 官方文档:https://layer.lay ...
layui弹出层：倒计时后自动关闭（含代码、案例）
layui弹出层:倒计时后自动关闭(含代码.案例) 问题描述: 如何设定倒计时? 如何在自动倒计时结束后关闭弹框: 如何自定义"按钮文字"文案: 如何在关闭后,执行函数事件: 如何 ...
Layui 弹出层插件
Layui 弹出层插件开发工具与关键技术: Visual Studio 2015 – Layui 作者:廖亚星撰写时间:2019年 6 月4日这段时间在做项目页面的搭建,在页面的操作中,会出现很 ...
layui弹出框php,layui弹出层怎么使用
layui弹出层的使用方法:首先引入jQuery1.8以上的任意版本:然后引入laery.js:最后通过"function show(){var a = layer.open({...}); ...
layui弹出层弹出另一个页面
layer.open({type: 2,skin: 'layui-layer-demo', //样式类名title: '标题',closeBtn: 0, //不显示关闭按钮anim: 2,area: ...
Layui 弹出层模块
Layui 弹出层模块使用场景由于layer可以独立使用,也可以通过Layui模块化使用.所以请按照你的实际需求来选择. 作为独立组件使用: 如果你只是单独想使用 layer,你可以去 layer ...
模拟layui弹出层
以前觉得自己手写一个类似layui的弹出层是挺遥远的事,因为完全没有头绪,即便在layui官网知道layui使用的都是C3动画之前试过控制width:0;height:0来做动画,结果惨不忍睹,直到 ...
layui弹出层：使用icon图标小结
文章目录 layui弹出层:icon图标小结表格示下: 调用代码 · 效果图 · 示下: layui弹出层:icon图标小结 layui的弹框插件layer中,有很多不同场景需要的弹框icon图标, ...

如何更改layui弹出层样式

如何更改layui弹出层样式相关推荐

最新文章

热门文章