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实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
JQuery常见节点操作实例分析
May 15 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
python端口扫描系统实现方法
2014/11/19 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python自动发送邮件脚本
2018/06/20 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
django框架ModelForm组件用法详解
2019/12/11 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Python如何输出百分比
2020/07/31 Python
pandas apply多线程实现代码
2020/08/17 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
科研先进个人典型材料
2014/01/31 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
2015年中秋寄语
2015/07/31 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers