如何更改layui弹出层样式「建议收藏」
如何 建议 收藏 更改 样式 弹出 layui
2023-06-13 09:11:27 时间
大家好,又见面了,我是你们的朋友全栈君。
首先引入插件:
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中用该类名更改。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/143113.html原文链接:https://javaforall.cn
相关文章
- shellcode免杀「建议收藏」
- python求逆矩阵的方法,Python 如何求矩阵的逆「建议收藏」
- Pycharm如何创建Django项目「建议收藏」
- 如何学习FPGA「建议收藏」
- windows系统如何cmd查看端口被占用、杀进程「建议收藏」
- 如何从从官网下载各个版本的jquery「建议收藏」
- ArrayList扩容后原有数组是如何处理的?「建议收藏」
- 如何彻底删除卸载JDK?「建议收藏」
- java 构造函数是如何执行的「建议收藏」
- 如何在pycharm中安装selenium「建议收藏」
- MDK(KEIL5)如何生成.bin文件(亲测可用)「建议收藏」
- 固态硬盘数据如何恢复「建议收藏」
- php隐式转换,隐式转换如何使用?总结隐式转换实例用法「建议收藏」
- jupyter notebook的链接密码 token查询 以及 pycharm 如何使用 jupyter notebook「建议收藏」
- java找不到或无法加载主类_java找不到或无法加载主类如何解决?解决方法「建议收藏」
- Oracle 参数 DB_BLOCK_SIZE 官方解释,作用,如何配置最优化建议
- Oracle 参数 LOB_SIGNATURE_ENABLE 官方解释,作用,如何配置最优化建议
- Oracle 参数 PARALLEL_MIN_DEGREE 官方解释,作用,如何配置最优化建议
- Oracle 参数 RESOURCE_LIMIT 官方解释,作用,如何配置最优化建议
- Oracle 参数 SKIP_UNUSABLE_INDEXES 官方解释,作用,如何配置最优化建议
- Oracle 参数 SORT_AREA_RETAINED_SIZE 官方解释,作用,如何配置最优化建议
- Oracle 参数 TRANSACTIONS 官方解释,作用,如何配置最优化建议
- Oracle 参数 USE_DEDICATED_BROKER 官方解释,作用,如何配置最优化建议