一張圖解析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;
});