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中关于bind()方法的使用技巧分享
Mar 30 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery插件实现图片轮播效果
Oct 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模拟asp中response类实现方法
2015/08/08 PHP
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python 数据结构之旋转链表
2017/02/25 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python实现简单的五子棋游戏
2020/09/01 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
C#的几个面试问题
2016/05/22 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
中间件分为哪几类
2016/09/18 面试题
房屋继承公证书
2014/04/10 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
php+laravel 扫码二维码签到功能
2021/05/15 PHP