layui 优化 button 按钮和弹出框的方法
作者:霁月时间:2026-10-22 17:05:56浏览:400
本文介绍如何在 layui 框架下优化按钮组的视觉紧凑度及弹出层交互体验。通过调整按钮间距解决压缩后显示异常问题,并利用 layer.open 配置参数实现点击触发详情弹窗,展示活动信息。
layui 按钮布局优化
在默认状态下,layui 界面中通常包含三个 button 按钮。

当代码经过压缩处理后,按钮的显示效果可能会发生变化。

具体实现的代码如下所示。
<button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改门店</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-danger del-activity">删除活动</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">关闭活动</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">开启活动</button>
为了优化显示效果,建议为每个 button 元素添加适当的空字符或间距调整。
<a><button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改门店</button><a>
优化后的界面效果如图所示。

弹出层交互实现
当用户点击“点击查看”链接时,系统将触发弹出框以展示详细信息。

相关的 HTML 结构代码如下。
<td class='mouse-over-out' data-content="适用门店:{$activity.store_count}个 <hr> 活动主题:{$activity.activity_theme} <hr> 卡券ID:{$activity.wechat_card_id} <hr>"><a style="color:red;" href="#" rel="external nofollow" >点击查看</a></td>
配套的 JavaScript 逻辑代码如下。
//显示活动详情
$('.mouse-over-out').click(function(){
layer.open({
title: '活动详情',
type: 1,
skin: 'layui-layer-demo', //样式类名
closeBtn: 0, //不显示关闭按钮
anim: 2, //弹出层样式
shadeClose: true, //开启遮罩关闭
area: ['20%', '30%'],
content:"<div style='height:90%;width:90%;margin:0 auto;margin-top:5%;'><p style='line-height:1%;'>"+
$(this).data('content')+
"<p/></div>"
});
});
以上关于 layui 优化 button 按钮和弹出框的方法分享完毕,希望能对读者有所帮助,也欢迎大家继续支持本站。
作者最新文章
tween.js 内存泄漏预防:怎么正确停止动画与清理对象
2026-11-05 15:52:56
Vue或React项目中为何不建议直接使用JS刷新页面
2026-11-05 13:57:30
哪里可以找到高质量的免费JS脚本资源?
2026-11-05 13:15:03
JS数组对象怎么根据指定ID字段去重
2026-11-04 21:41:10
JS数组去重方法性能对比:Set、Map与Filter谁更快
2026-11-04 16:14:15
