fastadmin按钮弹窗大小显示方式

最新推荐文章于 2025-08-25 16:32:34 发布

原创最新推荐文章于 2025-08-25 16:32:34 发布 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js #php

fastadmin 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在HTML和JavaScript中为表格添加编辑弹窗，并提供了两种不同的属性设置方法。第一种是在HTML文件中直接为元素添加`data-area`和`data-shade`属性来定义弹窗大小和遮罩层效果。第二种是在JavaScript文件中通过回调函数统一设置这些属性，简化代码。这两种方式都适用于前端开发中表格操作的交互优化。

表格上面的添加，编辑弹窗，可以直接在对应的index.html文件里面加上下面对应的属性

data-area='["60%","80%"]' --大小 data-shade='[0.5,"#000"]' --遮罩层

表格里面的编辑弹窗，在对应的.js文件里面添加，重写行内按钮属性样式

buttons:[{
    name: 'edit',
    title: '修改',
    icon: 'fa fa-pencil',
    classname: 'btn btn-xs btn-success btn-editone btn-dialog',
    extend: 'data-area=\'["60%","80%"]\' data-shade=\'[0.5,"#000"]\' data-toggle="tooltip"',
    url:'office/office_address/edit'
}]

如果嫌上面的写法麻烦，还有一种简单写法直接一步到位，只需要在对应的.js文件里面添加如下的对应按钮属性即可

onLoadSuccess:function(){
    // 这里就是数据渲染结束后的回调函数
    $(".btn-editone,.btn-add").data("area", ['60%','80%']);
    $(".btn-editone,.btn-add").data("shade", [0.5,"#000"]);
}