我的设计是点击按钮弹出表单所在的弹出层
点击弹出层的按钮：
<button class="layui-btn" id="add_btn"><i class="layui-icon"></i>添加数据</button>
弹出层表单代码：
<div id="add_form" style="display: none;margin-right: 10px;">
<form class="layui-form" style="margin-top: 10px" lay-filter="example">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" placeholder="请输入标题" required lay-verify="required" 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="interest" lay-filter="aihao">
<option value="0">写作</option>
<option value="1">阅读</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like_sing" title="唱歌">
<input type="checkbox" name="like_dance" title="舞蹈">
<input type="checkbox" name="like_game" title="游戏">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" lay-skin="switch" name="switch1">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关开</label>
<div class="layui-input-block">
<input type="checkbox" checked lay-skin="switch" name="switch2">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">请填写描述</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit_form">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
js:
layui.use(['layer','form'], function(){
var $=layui.jquery,layer=layui.layer,form=layui.form;
$('#add_btn').click( function(){
var index = layer.open({
title: '导入文件',
type: 1,
shade: 0.4, ////遮罩透明度
area: ['600px', '350px'],
content:$('#add_form'),
success:function(){
form.on('submit(submit_form)', function(data){
var form_data = {form_data:JSON.stringify(form.val('example'))} //获取表单那数据
console.log(form_data);
$.ajax({
url:'/add_form/',
method:'post',
data:form_data,
dataType:'JSON',
success:function (result) {
if (result.code===0){
layer.close(index);
layer.msg(result.msg,{icon: 6});
}else {
layer.msg(result.msg,{icon: 5});
}
}
})
return false;
});
}
})
})
})
