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+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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
smarty内置函数capture用法分析
2015/01/22 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
python3+PyQt5实现拖放功能
2018/04/24 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python内存动态分配过程详解
2019/07/15 Python
Django框架安装方法图文详解
2019/11/04 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
维德科技C#面试题笔试题
2015/12/09 面试题
经销商会议欢迎词
2014/01/11 职场文书
家长对小学生的评语
2014/01/28 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
三国演义读书笔记
2015/06/25 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
MySQL七种JOIN类型小结
2021/10/24 MySQL
python中mongodb包操作数据库
2022/04/19 Python