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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 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
PHP简介
2006/10/09 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python中functools模块函数解析
2017/03/12 Python
Django自定义用户认证示例详解
2018/03/14 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
python实现扫雷小游戏
2020/04/24 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
护士优质服务演讲稿
2014/08/26 职场文书
稽核岗位职责范本
2015/04/13 职场文书
面试通知邮件
2015/04/20 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
小型婚礼主持词
2015/06/30 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
Mysql 一主多从的部署
2022/05/20 MySQL