新增模态框

                   新增模态框

开发工具与关键技术：MVC   专题技术
作者：彭春怡
撰写时间：2019/5/26

各位IT的朋友们好，今天我想给大家介绍的是新增模态框的制作。新增模态框呢，是用来添加新的数据的。填写完并保存，保存成功就是添加成功。保存失败，就是添加失败。就是一个弹出模态框。
接下来我一起了解新增模态框是怎么样完成的。
首先写一个新增操作按钮的样式。如下：

新增

图1：下图用红色笔画出来的就是以上的样式代码的按钮。

   成后，就是模态框的样式代码了，下面就是模态框的样式代码：
      新增模态框：
        <div class="modal fade" id="modalInsetAcademe" tabindex="-1" role="dialog" aria-         labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

模态框头部：

            <div class="modal-header">
                <h4 class="modal-title">新增学院</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

     模态框主体：
            <div class="modal-body">
                <form id="formInsetAcademe" class="form-horizontal">
     重置表单部分：
         <input type="reset" hidden />
             <div class="form-group form-row">
                 <label class="col-form-label col-3" for="IAcademeName">学院名称：</label>
                   <div class="col-9">
                    <input type="text" class="form-control" name="AcademeName" id="IAcademeName" />
                        </div>
                    </div>
                    <div class="form-group form-row">
                        <label class="col-form-label col-3" for="IAcademeCode">学院代号：</label>
                        <div class="col-9">
                           <input type="text" class="form-control" name="AcademeCode" id="IAcademeCode" />
                        </div>
                    </div>
                    <div class="form-group form-row justify-content-center">
                        <div class="col-auto">
                            <button type="button" class="btn btn-primary mr-2" onclick="savaInsert()">保存</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

图2便是以上样式代码形成的一个模态框：

下面就是写打开模态框的功能：
function openInsert() {
$(’#formInsetAcademe input[type=“reset”]’).click();
$("#modalInsetAcademe").modal(‘show’);
}
上面是重置表单与打开模态框的部分，方法是一样的，绑定正确的数据便可。“openInsert”是上面按钮样式代码哪里给的id，“formInsetAcademe”是form标签里面的id，“modalInsetAcademe”是模态框最外层盒子的id。只要填写正确便可。
//保存新增
function savaInsert() {
//获取input输入数据
var AcademeName = $("#IAcademeName").val();
var AcademeCode = $("#IAcademeCode").val();
//判断
if (AcademeName != ‘’ && AcademeName != undefined
&& AcademeCode != ‘’ && AcademeCode != undefined) {
上面是保存按钮的功能，上面保存按钮里面的id。首先是获取input输入的AcademeName、AcademeCodede的数据。然后就是判断AcademeName、AcademeCode的数据是否完整。 $.post("/SystemManagements/Collegelnfor/InsertAcademe", { AcademeName: AcademeName, AcademeCode: AcademeCode },
获取控制器里查询方法的数据。

function (returnJson) {
if (returnJson.State == true) {
//关闭模态框
$("#modalInsetAcademe").modal(‘hide’);
//刷新table
tabAcademe = layuiTable.reload(‘tabAcademe’);
}
layer.alert(returnJson.Text);

            }, "json")
        }

以上是模态框关闭按钮的功能，“returnJson”是样式代码里的模态框关闭按钮的id。$("#modalInsetAcademe").modal(‘hide’);是模态框进行隐藏。hide是隐藏的功能。然后是刷新数据，最后返回数据。

        else {
            //提示
            layer.alert('请填写完整', { title: '提示', icon: 0 });
        }
    }

这里是判断AcademeName、AcademeCode数据未填写完整时，就会弹出一个提示框，提示“请填写完整”。如下图：

总结：要完成整个操作还要一个插件才可以完成该功能“bootstrap.bundle.js”插件。直接引入便可。一个小功能，希望给大家带来一点帮助。