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

深探jQuery Layer弹出层：如何将值传递到父页面

在web开发中，我们经常需要使用弹出层来接收用户的输入，并将这些值传递回父页面。下面，我将详细介绍如何使用jQuery Layer插件实现这一功能。

当我们打开一个新的Layer弹出层，通常是为了获取用户的某些输入。例如，在一个任务管理系统中，用户可能在弹出层中输入新的任务信息。一旦点击“确定”，这些输入的信息应该被传递到父页面，并反映在页面的某个位置，比如一个树形结构中。

以下是一个简单的实现过程：

在文档加载完成后，我们初始化一个添加任务的弹出层。每当用户点击相应的元素时，这个层就会打开，内容通常是一个表单，让用户输入任务信息。

当用户在弹出层中输入信息并点击“确定”时，我们的代码会捕获这个事件。它从弹出层中获取用户输入的值。然后，它创建一个包含这个值的HTML字符串。接下来，这个字符串被添加到父页面的指定元素中，比如一个树形结构的ul元素。

我们的代码会获取当前弹出层的索引，然后关闭它。这样，用户就可以继续在父页面上操作，他们刚刚输入的任务信息已经反映在页面上了。

以下是具体的代码实现：

```javascript

$(document).ready(function(){

// 添加任务弹出层

addTaskLayer();

});

function addTaskLayer(){

$('[data-id="addList"]').on('click', function(){

layer.open({

type: 2,

title: '添加任务',

closeBtn:1,

shadeClose: false, //点击遮罩不关闭层

area : ['15%' , '28%'], //弹层宽高

content: 'jsp/taskconf/roundConf-addList.jsp'

});

});

}

// 点击确定按钮，传值到父页面并关闭弹层

$('[data-id="saveBtn"]').click(function(){

var txt = $('[data-id="team-txt"]').val(); //获取弹出层内的输入值

var parentId = parent.$("leftTree_1_ul"); //父页面接收值的元素ID

// 创建包含输入值的HTML字符串

var str = "

parentId.append(str); //将字符串添加到父页面的元素中

// 关闭弹出层

var index = parent.layer.getFrameIndex(window.name);

parent.layer.close(index);

});

```

以上代码实现了从Layer弹出层向父页面传递值的基本功能。在实际项目中，你可能需要根据具体需求对其进行调整。为了确保代码的正常运行，你需要确保Layer插件已经在页面中正确引入。狼蚁SEO的推广和支持对于我们这些开发者来说是非常宝贵的资源，感谢他们的付出。