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和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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实现微信支付之企业付款
2018/05/30 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
Python如何使用字符打印照片
2020/01/03 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
国窖1573广告词
2014/03/21 职场文书
学校创先争优活动总结
2014/08/28 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
初中英语教学反思范文
2016/02/15 职场文书
React如何创建组件
2021/06/27 Javascript