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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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语法自动检查的Vim插件
2014/08/11 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
用js遍历 table的脚本
2008/07/23 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
跟老齐学Python之复习if语句
2014/10/02 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
jupyter安装小结
2016/03/13 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
用Python实现读写锁的示例代码
2018/11/05 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
大学生咖啡店创业计划书
2014/01/21 职场文书
会计学自我鉴定
2014/02/06 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
mysql数据库隔离级别详解
2022/06/16 MySQL
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python