jQuery Layer弹出层传值到父页面的实现代码


Posted in jQuery onAugust 17, 2017

目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组。

在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答

jQuery Layer弹出层传值到父页面的实现代码

$(document).ready(function(){
//添加任务弹出层
addTask(); 
});
//弹出层
function addTask(){
$('[data-id="addList"]').on('click', function(){
layer.open({
type: 2,title: '添加任务',
closeBtn:1,
//maxmin: true,
shadeClose: false, //点击遮罩关闭层
area : ['15%' , '28%'],//弹层宽高
content: 'jsp/taskconf/roundConf-addList.jsp'
});
});
//关闭弹层
layerClose();
addTeam("addTeam");
addTeam("addRule");
}
//点击确定按钮,先传值到父页面,然后关闭弹层
function layerClose(){
('[data-id="saveBtn"]').click(function(){ //点击确定按钮,获取弹层输入值,传入父页面 var parentId=parent.('[data-id="saveBtn"]').click(function(){ //点击确定按钮,获取弹层输入值,传入父页面 var parentId=parent.("#leftTree_1_ul");//接收值的父页面ID
var txt = $('[data-id="team-txt"]').val();//弹出层内获取要传出的值
var str = "<li id="leftTree_9" class="level1" tabindex="0" hidefocus="true">" +
"<span id="leftTree_9_switch" class="button level1 switch center_open" treenode_switch="">" +
"<a id="leftTree_9_a" class="level1" target="_blank" title='"+txt+"'>" +
"<span id="leftTree_9_ico" class="button ico_open">" +
"<span id="leftTree_9_span" class="node_name">"+txt+"" +
"";
parentId.append(str);//传值到父页面
 //先得到当前iframe层的索引
 var index = parent.layer.getFrameIndex(window.name);  
 parent.layer.close(index); //再执行关闭 
});
}

总结

以上所述是小编给大家介绍的jQuery Layer弹出层传值到父页面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 #jQuery
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
jQuery中each循环的跳出和结束实例
Aug 16 #jQuery
You might like
层叠菜单的动态生成
2006/10/09 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
php从字符串创建函数的方法
2015/03/16 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
python代码实现图书管理系统
2020/11/30 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
介绍一下Python下range()函数的用法
2013/11/07 面试题
求职信格式范本
2013/11/15 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
团日活动总结格式
2015/05/11 职场文书