.NET + layui -- 弹出层表单-CSDN博客

本文链接：https://blog.csdn.net/weixin_43047070/article/details/102562927

要放在弹出层的表单–style=“display:none”

<form class="layui-form addList" style="display:none" method="post" onsubmit="return toVaild()" action="~/Admin/AddAdvert" enctype="multipart/form-data" >
    <div style="
    margin-bottom: 20px;
">
        <label class="layui-form-label">广告名称</label>
        <div class="layui-inline">
            <input class="layui-input" name="videosort" id="videosort" autocomplete="off" placeholder="请输入广告名称(长度在2~15字之间)">
        </div>
    </div>
    <input type="hidden" id="imagepath" name="imagepath" value="" />
    <input type="hidden" id="subtype" name="subtype" value="0" />
    <div class="layui-upload">
        <label class="layui-form-label">上传广告图</label>
        <button type="button" class="layui-btn layui-btn-normal" id="choose-cover-img">选择文件</button>
        <button type="button" class="layui-btn" id="upload-cover-img">开始上传</button>
        <div class="layui-input-block">
            <img class="layui-upload-img" src="" id="cover-img">
            <p id="cover-text"></p>
        </div>
    </div>

</form>

点击按钮跳出弹出层

<button class="layui-btn" id="addAdvert">添加</button>

点击添加按钮的js代码

    //添加
    $('#addAdvert').on('click', function () {
        layer.open({
            type: 1,
            area: ['500px', '600px'],
            title: '添加广告图'
            , content: $(".addList"),//通过这个进入表单
            shade: 0,
            btn: ['提交', '重置']
            , btn1: function (index, layero) {


                $(".addList").hide();
                layer.closeAll();
            },
            btn2: function (index, layero) {
                $(".addList").hide();
                return false;
            },
            cancel: function (layero, index) {
                $(".addList").hide();
                layer.closeAll();
            }

        });
    })