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实现百度登录框的动态切换效果
Apr 21 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 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图片处理函数获取类型及扩展名实例
2014/11/19 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
js实现拖拽上传图片功能
2017/08/01 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
python判断完全平方数的方法
2018/11/13 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python线程的几种创建方式详解
2019/08/29 Python
快速查找Python安装路径方法
2020/02/06 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
一名女生的自荐信
2013/12/08 职场文书
高中生活自我鉴定
2014/01/18 职场文书
法制宣传教育方案
2014/05/09 职场文书
师范生求职自荐信
2014/06/14 职场文书
影视广告专业求职信
2014/09/02 职场文书
公民授权委托书
2014/10/15 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
给校长的建议书范文
2015/09/14 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
Golang 入门 之url 包
2022/05/04 Golang