layui form表单中 input 后加一button点击弹出layer层
时间: 2023-12-10 22:37:48 浏览: 51
你可以像下面这样写一个表单,其中 input 后面有一个按钮,当按钮被点击时,会弹出一个 layer 层:
```
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-inline">
<input type="text" name="input" required lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<button class="layui-btn layui-btn-normal" type="button" id="btn">弹出层</button>
</div>
</div>
</form>
<script>
layui.use(['form', 'layer'], function(){
var form = layui.form;
var layer = layui.layer;
// 监听按钮点击事件
$('#btn').on('click', function(){
layer.open({
title: '弹出层',
content: '这是一个弹出层'
});
});
});
</script>
```
在上面的代码中,我们使用了 layui.form 和 layui.layer 这两个模块。当页面加载完成后,我们通过 `layui.use` 方法来加载这两个模块。
接着,我们在按钮的点击事件中使用 `layer.open` 来弹出一个层。在 `layer.open` 的配置参数中,我们可以设置标题和内容,这里我们简单地设置了一个标题和一段文字作为内容。