在 public/assets/js/backend/ 文件夹下的 JS 文件中，这是最直接的控制方式。
1. Fast.api.open(url, title, options)
这是底层方法。通过 area 参数控制，支持百分比或像素值。
- Fast.api.open("example/edit", "标题", {
- area: ['800px', '600px'], // [宽, 高]
- // 或者百分比
- // area: ['90%', '90%'],
- maxmin: true, // 是否显示最大化按钮
- });
2. Table.api.init 全局配置
如果你希望该页面所有通过 Table.api.formatter.operate 生成的编辑/添加弹窗都统一大小：
- table.bootstrapTable({
- // ...
- extend: {
- index_url: '...',
- add_url: '...',
- edit_url: '...',
- // 注意：这里不能直接写 area，但可以通过设置全局 layer 参数
- }
- });
也可以在初始化之后设置全局参数：
- // 在初始化表格前，修改 Layer 默认值（影响全局）
- Layer.config({
- area: ['500px', '500px']
- });
- Fast.config.openArea = ['900px', '650px'];
二、 前端
通过在 HTML 元素上绑定 data-area 属性，FastAdmin 的 Form.bindevent 会自动识别。
1. 工具栏按钮 (Toolbar)
在 index.html 的 toolbar 区域：
2. 任意 DOM 元素
- <a href="javascript：;" class="btn btn-success btn-add"
- data-area='["80%", "80%"]' title="添加">
- <i class="fa fa-plus"></i> 添加
- </a>
只要带有 btn-dialog 类的元素，都可以通过 data-area 指定大小：
三、 JS 动态按钮定义
- <button class="btn btn-info btn-dialog"
- url="test/view"
- data-area='["400px", "300px"]'>查看详情</button>
在 columns 的 buttons 数组中动态定义。
1. extend 字符串属性
通过 extend 传入 data-area 属性字符串：
2. extend 函数动态判断 (最灵活)
- {
- name: 'detail',
- classname: 'btn btn-xs btn-primary btn-dialog',
- url: 'example/detail',
- extend: 'data-area=\'["95%", "95%"]\'' // 必须转义引号
- }
根据当前行的数据动态决定弹窗大小：
- extend: function(row) {
- if (row.level == 1) {
- return 'data-area=\'["90%", "90%"]\'';
- }
- return 'data-area=\'["500px", "400px"]\'';
- }
四、 后端
虽然弹窗是前端行为，但后端可以通过控制渲染逻辑来影响前端。
1. 控制器中的 $append 或 buttons
如果你在后端 PHP 中构造自定义按钮（例如在 operate 列之外），可以拼接属性：
2. 插件/配置项 (Config)
- $button = '<a href="..." class="btn-dialog" data-area=\'["600px","400px"]\'>按钮</a>';
有些插件会在 config.php 中预设弹窗大小，然后在 JS 中通过 Config.xxx 读取。
文章点评