在
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)` 方法来关闭弹出层。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
