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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
shiro授权的实现原理
2017/09/21 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
解读python logging模块的使用方法
2018/04/17 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
python文件选择对话框的操作方法
2019/06/27 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
纪录片信仰观后感
2015/06/08 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
win10清理dns缓存
2022/04/19 数码科技