<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>
<div class="layui-container">
<button class="layui-btn" id="btnOpen">打开弹层</button>
</div>
<!-- 弹层模板 -->
<script type="text/html" id="layerTemplate">
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">提示信息1</label>
<div class="layui-input-block">
<input type="text" name="input1" required lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">提示信息2</label>
<div class="layui-input-block">
<input type="text" name="input2" required lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-layout-right">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formSubmit">提交</button>
<button class="layui-btn layui-btn-primary" lay-event="cancel">取消</button>
</div>
</div>
</script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
// 点击按钮打开弹层
document.getElementById('btnOpen').addEventListener('click', function() {
layer.open({
type: 1,
title: '输入信息',
content: document.getElementById('layerTemplate').innerHTML,
area: ['400px', '200px'],
btnAlign: 'c',
success: function(layero, index) {
// 弹层打开成功后的回调函数
form.render(); // 重新渲染表单
// 监听提交按钮点击事件
form.on('submit(formSubmit)', function(data){
console.log(data.field); // 打印表单数据
layer.close(index); // 关闭弹层
return false; // 阻止表单的默认提交
});
}
});
});
});
</script>
</body>
</html>
扫一扫
03-09
343
343
06-12
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
