jQuery Layer弹出层传值到父页面的实现代码

 更新时间:2017年08月17日 14:17:08   作者:飞天龙猫  
这篇文章主要介绍了jQuery Layer弹出层传值到父页面的实现代码,需要的朋友可以参考下

目前做的项目中用到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插件写法笔记整理

    大部分jQuery插件都是这种类型的插件,由于这种插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器优势
    2012-09-09
  • jQuery实现的自适应焦点图效果完整实例

    jQuery实现的自适应焦点图效果完整实例

    这篇文章主要介绍了jQuery实现的自适应焦点图效果,结合完整实例形式分析了jQuery事件响应及动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2016-08-08
  • jQuery插件实现大图全屏图片相册

    jQuery插件实现大图全屏图片相册

    这篇文章主要介绍了jQuery插件实现大图全屏图片相册的方法和示例,基于jQuery插件jQuery.album.js来实现的,效果非常不错,这里推荐给大家,希望大家能够喜欢。
    2015-03-03
  • 全面解析jQuery $(document).ready()和JavaScript onload事件

    全面解析jQuery $(document).ready()和JavaScript onload事件

    这篇文章主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JQuery实现图片轮播效果

    JQuery实现图片轮播效果

    用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色,大大简化了js的代码,需要的朋友可以参考下
    2015-09-09
  • Jquery Change与bind事件代码

    Jquery Change与bind事件代码

    在每一个匹配元素的change事件中绑定一个处理函数。change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。
    2011-09-09
  • 使用DataTable插件实现异步加载数据

    使用DataTable插件实现异步加载数据

    本文给大家分享的是Jquery+dataTable插件来实现异步加载数据的示例代码,非常实用,有需要的小伙伴可以参考下
    2017-11-11
  • jQuery动画效果相关方法实例分析

    jQuery动画效果相关方法实例分析

    这篇文章主要介绍了jQuery动画效果相关方法,结合实例形式较为详细的分析了jQuery实现动画效果所用到的常见方法与相关注意事项,需要的朋友可以参考下
    2015-12-12
  • 自定义jquery模态窗口插件无法在顶层窗口显示问题

    自定义jquery模态窗口插件无法在顶层窗口显示问题

    自定义一个jquery模态窗口插件只能在mainFrame窗口中显示,无法在顶层窗口显示
    2014-05-05
  • jQuery 实现扁平式小清新导航

    jQuery 实现扁平式小清新导航

    这篇文章主要介绍了jQuery 实现扁平式小清新导航,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07

最新评论