layui表单关闭按钮
时间: 2023-06-26 15:05:59 浏览: 54
在 layui 中,关闭按钮通常是放在弹出层中的,可以通过 `layer.close(index)` 方法来关闭弹出层。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui表单关闭按钮示例</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- 弹出层 -->
<div id="layerDemo" class="layui-layer">
<div class="layui-layer-content">
<form class="layui-form" lay-filter="formDemo">
<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>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<button type="button" class="layui-btn layui-btn-danger" id="closeBtn">关闭</button>
</div>
</div>
</form>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
layer.open({
type: 1,
title: '表单示例',
content: $('#layerDemo'),
area: ['500px', '400px']
});
// 监听提交
form.on('submit(formDemo)', function(data){
console.log(data.field);
layer.msg(JSON.stringify(data.field));
return false;
});
// 监听关闭按钮
$('#closeBtn').click(function() {
var index = layer.getFrameIndex(window.name); // 获取窗口索引
layer.close(index);
});
});
</script>
</body>
</html>
```
在上面的示例代码中,我们使用了 `layer.open` 方法来打开一个弹出层,并将表单内容放在了弹出层中。关闭按钮的代码如下:
```html
<button type="button" class="layui-btn layui-btn-danger" id="closeBtn">关闭</button>
```
我们给这个按钮添加了一个 id 为 `closeBtn` 的属性,然后在 JavaScript 中,使用 `$('#closeBtn')` 获取该按钮,并添加了点击事件,在点击事件中调用 `layer.close(index)` 方法来关闭弹出层。