layer,open中有表单,点击表单按钮保存后关闭layui弹窗
时间: 2023-07-20 21:25:01 浏览: 90
您可以使用以下代码来实现您的需求:
```javascript
// 获取表单所在的父级弹窗窗口索引
var index = parent.layer.getFrameIndex(window.name);
// 关闭弹窗
parent.layer.close(index);
```
其中,`parent.layer.getFrameIndex(window.name)` 用于获取当前弹窗的索引,`parent.layer.close(index)` 用于关闭弹窗。请确保该代码在点击保存按钮后执行。
相关问题
layui form表单中 input 后加一button点击弹出layer层
你可以像下面这样写一个表单,其中 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` 的配置参数中,我们可以设置标题和内容,这里我们简单地设置了一个标题和一段文字作为内容。
Layui如何生成弹窗表单
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>
```
这样就可以在点击按钮或链接时弹出一个包含表单的弹窗。用户填写完表单后,可以点击提交按钮,调用相应的提交逻辑。如果点击取消按钮或者右上角的关闭按钮,则关闭弹窗。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)