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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现穿梭框效果
Jan 19 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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
php查看网页源代码的方法
2015/03/13 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
机电一体化专业应届生求职信
2013/11/27 职场文书
项目资料员岗位职责
2013/12/10 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
大学生工作求职信
2014/06/23 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers