admin 发表于 2025-4-13 19:06:25

fastadmin框架后台管理自定义弹窗大小的几种方式

1、列表项按钮自定义弹窗大小


也就是在参考一张图解析FastAdmin中的表格列表的功能 - FastAdmin问答社区自定义列表项按钮,代码按钮:
extend: 'data-area=["60%","50%"]'
2、全局控制弹窗大小,需要修改public/assets/js/fast.js文件,大约在137行,如下图所示:

直接修改相关参数即可。
3、修改index.html中的左上角添加按钮和其他的自带按钮方法,打开对应的列表页js文件,在如下图所示的位置,添加代码:

代码:
// 修改添加窗口的大小
            $(".btn-add").data("area", ["80%", "100%"]);
            // 修改编辑窗口的大小
            $(".btn-edit").data("area", ["50%", "60%"]);或者也可以直接在index.html中修改,如下:

代码:
data-area='["80%","80%"]'4、在index.html中新增自定义弹窗:
   <a href="echarts/index" class="btn btn-info btn-dialog" title="图表" data-area=["100%","100%"] ><i class="fa fa-map-signs"></i> 地图</a>参考来源:fastadmin 自定义弹窗大小_fastadmin 弹窗大小-CSDN博客


如果是列表页的列表项右侧的默认编辑按钮点击窗口大小控制呢?可以使用如下代码:
找到:
var table = $("#table");

在下方加入:
table.on('post-body.bs.table',function() {
                $(".btn-add,.btn-editone").data("area", ['80%','80%']);
            });这样可以控制列表页左上角和列表项右侧的编辑弹窗大小。
页: [1]
查看完整版本: fastadmin框架后台管理自定义弹窗大小的几种方式