layui.layer弹层组件官方文档
layer.open的type参数有5个不同的值，如果要自定义弹窗内容，可以使用type: 1（页面层）。
使用页面层，则参数content可填写html或使用dom，本次我使用的dom方法。
1、首先在body外编写一个表单（主要是防止被其他元素所影响）
<form action="" id="create_table_from" class="layui-form" lay-filter="create_table_from" style="display: none;"><div class="layui-form-item"><label class="layui-form-label">工单名称</label><div class="layui-input-block"><input type="text" name="name" 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"><select name="type_id" lay-verify="required"><option value=""></option><option value="1">默认分类</option></select></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">工单说明</label><div class="layui-input-block"><textarea name="description" placeholder="请输入工单说明" class="layui-textarea"></textarea></div></div></form>
一定要设置好form的id以及lay-filter参数，方便后续获取表单表单需要先隐藏display: none;
2、表单写好后，开始配置layer.open参数
layer.open({//基本层类型type:1,//宽高area:['600px','500px'],//标题title: '创建新工单',//内容content: $('#create_table_from'),//按钮btn:['创建','取消'],//确定按钮yes:() => {//开启loadingconst loading = layer.load(2);//获取表单内的所有值const formData = layui.form.val("create_table_from");//发送数据到接口$.post('__URL__/table/post_table', formData, (res)=>{//关闭loadinglayer.close(loading);console.log(res);});},});
通过layui.form.val()来获取表单内的所有值，参数为html中lay-filter设置的值
效果图：
本次代码中有引入JQ
