layui form 弹窗赋值
时间: 2023-09-04 09:02:01 浏览: 63
layui form弹窗赋值可以通过以下步骤完成:
1. 首先,在使用layui框架之前,需要引入相关的CSS和JS文件。可以通过在HTML文件的头部使用`<link>`和`<script>`标签完成引入。
2. 在HTML文件中,定义一个按钮或其他的元素,用于触发弹窗的显示,例如:
```html
<button class="layui-btn" id="open-btn">打开弹窗</button>
```
3. 在JavaScript文件中,使用layui的`layer`组件来创建弹窗,并设置相关的配置项,例如:
```javascript
layui.use(['layer'], function(){
var layer = layui.layer;
//点击按钮打开弹窗
$("#open-btn").on("click", function(){
layer.open({
type: 1, //弹窗类型
title: "弹窗标题",
content: $("#form-container"), //弹窗内容
area: ['500px', '300px'], //弹窗大小
btn: ['确定', '取消'], //按钮
yes: function(index, layero){ //点击确定按钮的回调函数
//获取表单中的值并赋值给其他元素
var value1 = $("#input1").val();
var value2 = $("#input2").val();
$("#element1").text(value1);
$("#element2").text(value2);
layer.close(index); //关闭弹窗
},
});
});
});
```
4. 在HTML文件中定义一个表单,并为每个字段设置ID,例如:
```html
<div id="form-container" style="display: none;">
<form class="layui-form" lay-filter="popup-form">
<div class="layui-form-item">
<label class="layui-form-label">字段1</label>
<div class="layui-input-block">
<input type="text" id="input1" placeholder="请输入字段1" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">字段2</label>
<div class="layui-input-block">
<input type="text" id="input2" placeholder="请输入字段2" class="layui-input">
</div>
</div>
</form>
</div>
```
在点击按钮时,弹窗会显示出来,用户可以在弹窗中输入数据。点击确定按钮后,会获取表单中的值,并将其赋值给其他元素。最后,通过调用`layer.close(index)`关闭弹窗。