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中 DOM节点操作方法大全
Oct 12 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery实现颜色打字机的完整代码
Mar 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
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
smarty内置函数section的用法
2015/01/22 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python 硬币兑换问题
2019/07/29 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
Python grpc超时机制代码示例
2020/09/14 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
应届毕业生个人自我评价
2013/09/20 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
Java字符串逆序方法详情
2022/03/21 Java/Android
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS