Layui如何生成弹窗表单
时间: 2023-11-19 22:06:55 浏览: 33
Layui有一个弹窗组件layer,可以用来生成弹窗表单。具体的步骤如下:
1. 引入Layui的layer组件和form组件。在HTML文件中引入以下代码:
```html
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
```
2. 在JS文件中定义一个弹窗表单的函数,例如:
```javascript
function openForm() {
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
layer.open({
type: 1,
area: ['500px', '300px'],
title: '表单弹窗',
content: $('#form'),
btn: ['提交', '取消'],
yes: function(index, layero){
// 提交表单的逻辑
},
btn2: function(index, layero){
// 取消的逻辑
},
cancel: function(){
// 点击右上角的关闭按钮的逻辑
}
});
});
}
```
3. 在HTML文件中定义一个包含表单的div元素,并隐藏它。例如:
```html
<div id="form" style="display:none;">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
</form>
</div>
```
4. 在按钮或链接的点击事件中调用弹窗表单的函数。例如:
```html
<button onclick="openForm()">打开表单弹窗</button>
```
这样就可以在点击按钮或链接时弹出一个包含表单的弹窗。用户填写完表单后,可以点击提交按钮,调用相应的提交逻辑。如果点击取消按钮或者右上角的关闭按钮,则关闭弹窗。