父层

<div class="col-xs-4 text-left" style="padding-left: 50px;"><button type="button" class="btn btn-success" onclick="addCategory();">添加</button></div>

点击添加,按钮,执行添加方法

function addCategory() {
layer.open({
title:'<img src="{sh::RES}image/add.gif">&nbsp;添加分类',
type: 2,
area: ['700px', '530px'],
fix: false, //不固定
maxmin: true,
content: '{sh::U("Mall/editcategory")}',
success:function(layero,index){
},
end:function(){
var handle_status = $("#handle_status").val();
if ( handle_status == '1' ) {
layer.msg('添加成功!',{
icon: 1,
time: 2000 //2秒关闭(如果不配置,默认是3秒)
},function(){
history.go(0);
});
} else if ( handle_status == '2' ) {
layer.msg('添加失败!',{
icon: 2,
time: 2000 //2秒关闭(如果不配置,默认是3秒)
},function(){
history.go(0);
});
}
}
});
}

这个方法,打开一个iframe页面,页面中可以执行一些操作,添加分类,执行完毕后调用一个end方法。这个方法,很有用!

不管执行结果如果,都会调用。

iframe可以传递参数到父页面。

end方法,根据传递的结果,执行一些后续操作。

iframe层

<div class="content">
<form action="" method="post" id="myform" enctype="multipart/form-data">
<div class="form-group row">
<div class="left col-xs-3 text-right">
<label for="">名称:</label>
</div>
<div class="right col-xs-8 text-left">
<input type="text" class="form-control" id="name" name="name" placeholder="">
</div>
</div> <div class="form-group row">
<div class="left col-xs-3 text-right">
<label for="">类别:</label>
</div>
<div class="right col-xs-8 text-left">
<input type="text" class="form-control" id="name" name="name" placeholder="">
</div>
</div> <div class="form-group row">
<div class="left col-xs-3 text-right">
<label for="">图标:</label>
</div>
<div class="right col-xs-8 text-left">
<input type="file" id="logo" name="logo">
</div>
</div> <div class="form-group row">
<div class="left col-xs-3 text-right">
<label for="">启用:</label>
</div>
<div class="right col-xs-8 text-left">
<input name="status" type="checkbox" checked="checked"> 启用
</div>
</div>
<div class="form-group text-center submit">
<button type="submit" class="btn btn-primary ">提交</button>
</div>
</form>
</div>

表单提交,提交到后台(表单提交,刷新iframe层页面)

<script type="text/javascript">
var index = parent.layer.getFrameIndex(window.name);
var success = '{sh:$success}';
if ( success == '1' ) {
parent.$("#handle_status").val('1');
parent.layer.close(index);
} else if( success == '2' ) {
parent.$("#handle_status").val('2');
parent.layer.close(index);
}
</script>

收到执行的结果,success,成功是1,失败是2。执行相应的操作。也就是,

传值+关闭iframe层。

父层有一个隐藏的元素,专门用来接收传值的

<input id="handle_status" value="" hidden="hidden">

流程很清晰。

layer很牛逼!

layer ifram 弹出框的更多相关文章

  1. 使用layer显示弹出框笔记

    $.layer({     area : ['200px','auto'], //控制层宽高.当设置为auto时,意味着采用自适应, 当然,对于宽度,并不推荐这样做.例如:area : ['310px ...

  2. jQuery layer[页面弹出框]

    常见接口如下: 方法名 描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述列表.诸如layer.alert()之类的为$.layer()的包装方法. layer.v 获取版本号. ...

  3. layer.js弹出框

    HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. layer + ajax 弹出框

    项目中用到的一个很友好的弹出提示窗口.结合ajax很丝滑的与后台交互数据.引入layer.min.js layer.msg('你确定删除么?', { time: 0 //不自动关闭 ,btn: ['确 ...

  5. layui layer.open弹出框获取不了 input框的值

    layer.open({ title:'添加管理员', type: 1, content: $('.add_html').html(), btn:['添加', '取消'], btnAlign:'c', ...

  6. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  7. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

  8. 弹出框layer的使用封装

    layer弹出框官方网址:http://layer.layui.com/ layer常用方法的封装:layerTool.jsp layer.config({ extend: 'extend/layer ...

  9. HTML页面使用layer弹出框输入数据

    javascript中layer是一款近年来备受青睐的web弹层组件,layer.open对弹出框进行输入信息,并处理返回结果.详细介绍http://layer.layui.com/ 部署:将laye ...

随机推荐

  1. Select * 一定不走索引是否正确?

    Select * 一定不走索引是否正确? 走索引指的是:SQL语句的执行计划用到了1.聚集索引查找  2.索引查找  ,并且查询语句中需要有where子句 根据where子句的过滤条件,去聚集索引或非 ...

  2. hdu1358

    Problem Description For each prefix of a given string S with N characters (each character has an ASC ...

  3. java 的sigola orm 的开发,第一次学写java,可以用在play上面

    当然还是开源:https://github.com/xiaose1205/sigola     初学者有用,高手可以给点建议,勿喷啊.net转java,有些思想还没有那么快转.希望得到大家的支持啊 使 ...

  4. 读取的XML节点中带有冒号怎么办?

    读取的XML节点中带有冒号怎么办? 昨天,编程读取XML的时候,遇上了类似下面的一段XML <a:root xmlns:a="http://ww.abc.com/"> ...

  5. JDBC开发

    1.JDBC简介 )数据库驱动 )Sun公司为简化数据库开发,定义了一套jdbc接口,这套接口由数据库厂商去实现,这样,开发人员只需要学习jdbc接口,并通过jdbc加载具体的驱动,就可以操作数据库. ...

  6. Acoustic Echo Cancellation (AEC) 回音消除技术探索

            回声产生的原因: 本地产生的音频信息通过网络传输到远端, 远端音频信号通过反射再由远端麦克采集到远端系统,再通过IP网络传输本地,本地播放后,在由本地麦克采集到,这就构成了类似闭环正反 ...

  7. 服务端获取客户端html页面内容-2013-6-28-2

    客户端怎么提交  整个html页面?    分析:      1>我们知道b/s模式,也知道http协议.服务端想要获取客户端的数据,客户端就 必须提交给它,服务器才能获取到.     2> ...

  8. mysql关联删除

    <delete id="deleteBatchUserOfSp" parameterType="java.lang.String" > delete ...

  9. Android- assent和raw的区别

    Android- assent和raw的区别 相同点: 里面的文件在编译的时候都不会被编译成二进制文件,都会原封不动的打包. 不同点: 1.存放的路径不一样,一般assets存放在项目的根目录下,而r ...

  10. java编程思想笔记(一)——面向对象导论

    1.1 抽象过程 1.所有编程语言都提供抽象编程机制. 2.人们所能够解决的问题的复杂性直接取决于抽象的类型(所抽象的是什么)和质量. 3."命令式"语言(basic,c等)都是对 ...