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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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异常处理技术,顶级异常处理器
2012/06/13 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
最大K个数问题的Python版解法总结
2016/06/16 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
英国女士家居服网站:hush
2017/08/09 全球购物
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
餐饮加盟计划书
2014/01/10 职场文书
市场部经理岗位职责
2014/04/10 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
先进工作者个人总结
2015/02/15 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android