使用layer.open打开自定义弹窗，获取表单内容发送到后端

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:() => {
    	//开启loading
        const loading = layer.load(2);
        //获取表单内的所有值
        const formData = layui.form.val("create_table_from");
        //发送数据到接口
        $.post('__URL__/table/post_table', formData, (res)=>{
        	//关闭loading
            layer.close(loading);
            console.log(res);
        });
    },
});

• 通过layui.form.val()来获取表单内的所有值，参数为html中lay-filter设置的值

效果图：

• 本次代码中有引入JQ