用法:

在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对应的页面的内容,此处嵌入的urliframe,也就是说弹出窗口的正文是通过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

fastadmin模态框(弹出框)的更多相关文章

  1. 蜗牛爱课 - iOS7、8模态半透明弹出框

    //源Controller中跳转方法实现 MKDialogController *controller = [[MKDialogController alloc] init]; controller. ...

  2. ⒁bootstrap组件 工具提示框 弹出框 警告框 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  4. Bootstrap 弹出框和警告框插件

    一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type=" ...

  5. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  6. 第二百四十六节,Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

  7. 控制非模态弹出框(showModelessDialog)唯一且随父页面关闭

    网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两种,如下: 模态:window.showModalDialog() 非模态:window.showModelessDialog() ...

  8. Js实例——模态框弹出层

    1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...

  9. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

随机推荐

  1. 洛谷P2634 聪明可可

    还是点分治 树上问题真有趣ovo,这道题统计模3为0的距离,可以把重心的子树分开统计,也可以一次性统计,然后容斥原理减掉重复的.. 其他的过程就是点分治的板子啦. #include <bits/ ...

  2. ☆ [ZJOI2006] 书架 「平衡树维护数列」

    题目类型:平衡树 传送门:>Here< 题意:要求维护一个数列,支持:将某个元素置顶或置底,交换某元素与其前驱或后继的位置,查询编号为\(S\)的元素的排名,查询排名第\(k\)的元素编号 ...

  3. phpStudy The requested URL /web/index.php was not found on this server

    1.原因 phpStudy的httpd-conf 与 vhosts-ini 的目录设置错了 2.解决 分别打开httpd-conf 与 vhosts-ini 2个文件,搜索WWW,把里面的路径改成你的 ...

  4. 应用调试(三)oops

    目录 应用调试(三)oops 引入 配置内核打开用户oops CONFIG_DEBUG_USER user_debug 设置启动参数测试 打印用户堆栈 分析栈 main的调用 title: 应用调试( ...

  5. 机器学习 - 损失计算-softmax_cross_entropy_with_logits

    tf.nn.softmax_cross_entropy_with_logits(logits, labels, name=None) 第一个参数logits:就是神经网络最后一层的输出 第二个参数la ...

  6. ubuntu文件搜索统计

    一.在ubuntu下如何搜索文件 1.特点:快速,但是是模糊查找,例如 找 #whereis mysql 它会把mysql,mysql.ini,mysql.*所在的目录都找出来.我一般的查找都用这条命 ...

  7. 新年 flag

    在浮躁的年代本不该如此贪多,奈何鸭梨山大...温故知新吧 GO中文社区 深入学习一两门新的编程语言: -Go编程基础 -Go Web基础 -Go名库讲解 rustlang 中文文档 知乎板块 GO 知 ...

  8. 利用git提交代码

    一.首先需要下载git 查看电脑是否安装git,打开终端,输入git,回车如果输出如下,则代表已安装了git 如果未安装,则会输出: 按照提示输入:sudo apt-get install git即可 ...

  9. [再寄小读者之数学篇](2014-06-22 发散级数 [中国科学技术大学2012年高等数学B考研试题])

    设 $a_n>0$, $S_n=a_1+a_2+\cdots+a_n$, 级数 $\dps{\vsm{n}a_n}$ 发散, 证明: $\dps{\vsm{n}\cfrac{a_n}{S_n}} ...

  10. 目标检测网络之 YOLOv3

    本文逐步介绍YOLO v1~v3的设计历程. YOLOv1基本思想 YOLO将输入图像分成SxS个格子,若某个物体 Ground truth 的中心位置的坐标落入到某个格子,那么这个格子就负责检测出这 ...