layui弹框,填入内容后返回父页面
时间: 2025-01-01 22:40:38 浏览: 8
layui是一个轻量级的前端UI框架,它提供了一套简单易用的API用于创建各种弹窗(dialog)。在layui中,你可以使用`layer.open()`函数打开一个弹框,并通过设置回调函数来处理用户填写的内容。
下面是一个简单的例子,展示如何打开一个带表单的弹框,用户输入后点击确认按钮,数据会通过回调传回父页面:
```javascript
// 弹出带表单的layui弹框
layer.open({
type: 2, // 2代表iframe层
title: '请输入信息',
shadeClose: true, // 点击遮罩关闭
area: ['50%', 'auto'], // 自适应宽高
content: '<form id="myForm"><input type="text" name="info"></form>', // 弹框内HTML内容
btn: ['确定', '取消'], // 取消按钮
success: function(index) { // 当弹框加载成功时执行
$('#myForm').on('submit', function(e) { // 监听表单提交事件
e.preventDefault(); // 阻止默认提交行为
var info = $('input[name="info"]').val(); // 获取输入值
if (info) {
// 提交数据并关闭弹框,这里只是一个示例,实际场景下你需要将数据发送到服务器或父页面
layer.close(index);
parent.layer.msg('信息已保存:' + info); // 在父窗口显示消息
}
});
}
});
// 在这里,parent表示当前弹框所在的父页面,`layer`对象可以访问到父页面的`layer`实例
```
阅读全文