iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >jQuery中如何实现Layer弹出层传值到父页面
  • 144
分享到

jQuery中如何实现Layer弹出层传值到父页面

2024-04-02 19:04:59 144人浏览 安东尼
摘要

这篇文章主要介绍Jquery中如何实现Layer弹出层传值到父页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮

这篇文章主要介绍Jquery中如何实现Layer弹出层传值到父页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

目前做的项目中用到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弹出层传值到父页面”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网node.js频道!

--结束END--

本文标题: jQuery中如何实现Layer弹出层传值到父页面

本文链接: https://www.lsjlt.com/news/71160.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery中如何实现Layer弹出层传值到父页面
    这篇文章主要介绍jQuery中如何实现Layer弹出层传值到父页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮...
    99+
    2024-04-02
  • layer如何实现弹出子iframe层父子页面传值
    这篇文章给大家分享的是有关layer如何实现弹出子iframe层父子页面传值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。父页面获取子页面元素格式:$("#iframe...
    99+
    2024-04-02
  • layer如何实现关闭弹出层刷新父界面功能
    这篇文章主要介绍了layer如何实现关闭弹出层刷新父界面功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:layer是一款近年来备...
    99+
    2024-04-02
  • 如何使用layer.open子页面弹出层向父页面传输数据
    这篇文章给大家分享的是有关如何使用layer.open子页面弹出层向父页面传输数据的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。子页面向父页面传数据...
    99+
    2024-04-02
  • jQuery、layer如何实现弹出层的打开、关闭功能
    这篇文章主要介绍jQuery、layer如何实现弹出层的打开、关闭功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!打开弹出层:在list页面带入layer.js 在lis...
    99+
    2024-04-02
  • jQuery如何实现弹出窗口弹出div层
    这篇文章给大家分享的是有关jQuery如何实现弹出窗口弹出div层的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。通过今天的jquery实例学习,我们要达到这样的效果:点击页面的链...
    99+
    2024-04-02
  • 如何解决layer弹出层自适应页面大小的问题
    这篇文章主要介绍了如何解决layer弹出层自适应页面大小的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。网上的解决方案大都是以下几种:1...
    99+
    2024-04-02
  • 微信小程序中如何实现子页面向父页面传值
    这篇文章主要介绍微信小程序中如何实现子页面向父页面传值,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!微信小程序中子页面向父页面传值实例详解上面一张图是编辑款项页面,下面一张图是点击了...
    99+
    2024-04-02
  • jquery如何实现页面跳转并传值
    本文小编为大家详细介绍“jquery如何实现页面跳转并传值”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何实现页面跳转并传值”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、jQuery页面跳转在...
    99+
    2023-07-05
  • 如何实现layer弹出的iframe层在执行完毕后关闭当前弹出层
    这篇文章主要介绍如何实现layer弹出的iframe层在执行完毕后关闭当前弹出层,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!如下所示:这种弹出层在ajax执行完添加房间的动作后在回...
    99+
    2024-04-02
  • jQuery如何实现打开网页自动弹出遮罩层或点击弹出遮罩层功能
    这篇文章主要介绍了jQuery如何实现打开网页自动弹出遮罩层或点击弹出遮罩层功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:弹出...
    99+
    2024-04-02
  • jQuery如何实现页面遮罩层功能
    这篇文章主要介绍了jQuery如何实现页面遮罩层功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:<!DOCTYPE&nbs...
    99+
    2024-04-02
  • AngularJS如何实现跨页面传值
    这篇文章主要介绍了AngularJS如何实现跨页面传值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。用的ionic这里使用ui-router...
    99+
    2024-04-02
  • 如何实现layui页面级弹出框
    这篇文章给大家分享的是有关如何实现layui页面级弹出框的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。home/Index.cshtml@{    ViewData[&qu...
    99+
    2023-06-29
  • 如何使用jquery实现页面弹球效果
    这篇文章主要为大家展示了“如何使用jquery实现页面弹球效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用jquery实现页面弹球效果”这篇文章吧。具体内容如下像windows屏保一样...
    99+
    2023-06-26
  • Vue中如何实现父子组件传值
    Vue中如何实现父子组件传值,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。(一)传递数值1.子组件:Header.vue<templat...
    99+
    2024-04-02
  • Vue中父子组件如何实现传值
    目录前言一、将子组件引入父组件二、父组件如何传值给子组件三、子组件如何接收父组件传过来的值并使用(props)四、子组件如何传值给父组件($emit)五、父组件使用子组件传过来的值总...
    99+
    2023-01-28
    Vue父子组件 Vue组件传值 Vue父子组件传值
  • css3和jquery如何实现动画显示弹出层按钮
    这篇文章主要为大家展示了“css3和jquery如何实现动画显示弹出层按钮”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3和jquery如何实现动画显示弹...
    99+
    2024-04-02
  • 微信小程序中页面间如何实现传值与页面取值操作
    小编给大家分享一下微信小程序中页面间如何实现传值与页面取值操作,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体如下:微信小程序...
    99+
    2024-04-02
  • 微信小程序如何实现页面传值
    这篇文章将为大家详细讲解有关微信小程序如何实现页面传值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信小程序 页面传值详解一. 跨页面传值.1 . 用 navigato...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作