点击图片查看高清大图
如果此文章有帮忙到你，欢迎打赏支持FastAdmin
功能描述
弹出窗口是FastAdmin中最常用的功能之一，FastAdmin中默认生成的CRUD中的编辑、添加和删除的弹窗都是基于Layer弹层组件实现的，FastAdmin在此基础上进行了扩展和二次开发，除了Layer原有的功能外，还有部分FastAdmin特有的功能。
首先我们先来看看最常用的编辑和添加弹窗。在CRUD后的列表中默认的添加和编辑按钮会自动绑定事件，如果需要手动弹窗，我们可以使用Fast.api.open(url, title, options)进行弹出。
这里一定得注意下Fast.api.open和Layer.open有很大的区别，Layer.open是Layer自带的原始方法，Fast.api.open是FastAdmin独有的方法。
接下来我们看下使用Fast.api.open弹出的弹出窗口的组成部分
1.标题区域
用于显示弹出层的标题，配置title即可
2.内容区域
用于展示url对应的页面的内容，此处嵌入的url的iframe，也就是说弹出窗口的正文是通过iframe显示的，那么正文部分相当于完全新开一个页面。
3.操作区域
这个区域比较特殊，FastAdmin做了许多定制化，显示的内容从url对应的页面中的layer-footer区域内的内容复制到外部显示的。也就是说这部分的内容我们完全可以自定义，只需要修改url页面对应layer-footer区域内的内容即可。这里需要注意下这部分的内容会随着页面中layer-footer区域内的内容变化而变化，事件也会随之响应。
事件绑定
内容区域内因为是一个单独的iframe，通常情况下页面都是一个表单，默认是不会绑定事件的，我们需要在控制器对应的JS中Form.api.bindevent进行绑定事件，绑定事件后我们点确定按钮才会采用Ajax的方式进行提交表单，否则会采用原始的方式提交表单。
常用示例
打开一个弹窗并接收回传数据
Fast.api.open("https://www.fastadmin.net", "FastAdmin", { callback:function(value){
在这里可以接收弹出层中使用`Fast.api.close(data)`进行回传数据
}
});表单提交成功后不关闭弹窗
Form.api.bindevent("form[role=form]", function(data, ret){ //这里只要返回false，就会阻止我们的弹窗自动关闭和自动提示
return false;
});//
分享一下我的案例：
目的是点击按钮弹窗一个操作窗口，在窗口中提交表单成功后给调用弹窗的页面返回需要的数据，并调用指定的回调函数处理这些数据。
页面A，html代码中添加一个按钮：
<a data-url="/info/add" href="javascript:;" class="spec_add_btn" style="padding:0;" data-title="添加" >添加</a>
页面A，在js代码中添加以下代码监听class=spec_add_btn这个按钮的点击事件并弹窗打开页面B
$(document).on('click','.spec_add_btn', function (event) { var url = $(this).attr('data-url'); if(!url) return false; var msg = $(this).attr('data-title'); var width = $(this).attr('data-width'); var height = $(this).attr('data-height'); var area = [$(window).width() > 800 ? (width?width:'800px') : '95%', $(window).height() > 600 ? (height?height:'600px') : '95%']; var options = { shadeClose: false, shade: [0.3, '#393D49'], area: area, callback:function(value){ CallBackFun(value.id, value.name);//在回调函数里可以调用你的业务代码实现前端的各种逻辑和效果
}
}; Fast.api.open(url,msg,options);
});3、页面B，在js代码中对应的add方法里添加以下代码，监听submit并给页面A返回数据
Form.api.bindevent($("form[role=form]"), function(data, ret){ //这里是表单提交处理成功后的回调函数，接收来自php的返回数据
Fast.api.close(data);//这里是重点
Toastr.success("成功");//这个可有可无}, function(data, ret){
Toastr.success("失败");
});4、页面B，在php代码对应的add方法里添加成功后执行以下代码
$result = $this->model->allowField(true)->save($params);if ($result !== false)
{ $data['id'] = $id; $data['name'] = $name; $this->success('success',null,$data);//这里$data就是返回给第三步js的那个data。这里要根据业务需要返回指定的数据，否则前端接收不到数据。}
豫公网安备41077102000113