fastadmin模態框（彈出框）

 用法：

在html頁面新建一個按鈕用來觸發事件

<a href="javascript:;" class="btn btn-success btn-add " title="添加"><i class="fa fa-plus"></i> 添加</a>

然后js中定義一個點擊事件 在改事件里觸發 Fast.api.open(url, title, options)打開模態框

                // 在index頁面添加按鈕事件
                $(toolbar).on('click', '.btn-add', function () {
                    //獲取選中的條目ID集合
                    var url = 'gzconfig/add';//彈出窗口 add.html頁面的（fastadmin封裝layer模態框將以iframe的方式將add輸出到index頁面的模態框里）
                    Fast.api.open(url, __('Add'), data|| {});
                });

 add.html

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Gzname')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-gzname" data-rule="required" class="form-control" name="row[gzname]" type="text">
        </div>
    </div>
    //layer-footer里的內容怎么改則彈出出框里的3區域就怎么顯示
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>

</form>

fasadmin默認沒有給彈出框綁定事件，

我們需要在控制器對應的JS中Form.api.bindevent進行綁定事件，綁定事件后我們點確定按鈕才會采用Ajax的方式進行提交表單，否則會采用原始的方式提交表單

 

 模態框打開函數的具體參數Fast.api.open(彈出頁面的地址, 1的標題, options)

//將默認的參數defaultOptions放到options里如下：
Fast.api.open(彈出頁面的地址, 模態框的頭的標題, {
    type: 2,    
    title: title,
    shadeClose: true,
    shade: false,
    maxmin: true,
    moveOut: true,       
    content: '彈出頁面的地址',
    zIndex: Layer.zIndex,// 彈框的層級數
    success: function (layero, index)｛
            
    },
    'area':[
        $(window).width() > 800 ? '800px' : '95%',
        $(window).height() > 600 ? '600px' : '95%'
    ],
    'offset':[
        //窗口小於480px才定義
        top.$(".tab-pane.active").scrollTop() + "px", 
        "0px
    ]  

})

 此函數中有一個很重要的操作就是options = $.extend($defaultOptions,$options);

所以我們可以調一些沒有的參數(????猜測 因為不知道callback函數怎么來的)如:

 

Fast.api.open("www.fastadmin.net", "FastAdmin", {
    callback:function(value){
        在這里可以接收彈出層中使用`Fast.api.close(data)`進行回傳數據
    },
    aaa:function(){},
    bbb={1,2},
    ccc='tom'
});

 

 

1.標題區域
用於顯示彈出層的標題，配置title即可

2.內容區域
用於展示url對應的頁面的內容，此處嵌入的url的iframe，也就是說彈出窗口的正文是通過iframe顯示的，那么正文部分相當於完全新開一個頁面。

3.操作區域
這個區域比較特殊，FastAdmin做了許多定制化，顯示的內容從url對應的頁面中的layer-footer區域內的內容復制到外部顯示的。也就是說這部分的內容我們完全可以自定義，只需要修改url頁面對應layer-footer區域內的內容即可。這里需要注意下這部分的內容會隨着頁面中layer-footer區域內的內容變化而變化，事件也會隨之響應。

常用示例

打開一個彈窗並接收回傳數據

Fast.api.open("www.fastadmin.net", "FastAdmin", {
    callback:function(value){
        在這里可以接收彈出層中使用`Fast.api.close(data)`進行回傳數據
    }
});

表單提交成功后不關閉彈窗

Form.api.bindevent("form[role=form]", function(data, ret){
    //這里只要返回false，就會阻止我們的彈窗自動關閉和自動提示
    return false;
});

 

 

 

定義在public/assets/js/fast.js

Fast.config
Fast.events
Fast.lang
Fast.init
Fast.api.ajax
Fast.api.fixurl
Fast.api.cdnurl
Fast.api.query
Fast.api.open
Fast.api.close
Fast.api.layerfooter
Fast.api.success
Fast.api.error