模态框

模态框

开发工具与关键技术：VS MVC
作者：木林森
撰写时间：2019年 5月5日

在项目的开发中，如果想要在页面布局那里减少开发时间，那么我们就可以使用现成的layui模态框。
使用layui的模态框也是非常简单的，只需要在layui那个软件中找到你需要的模态框，然后将代码复制到你自己的项目中去，再引入对应的layui插件就行，一般它的插件在网上都能找到。
学习如何使用模态框最好的方法就是从例子里面去学习，然后自己再深入探究其中的奥秘，就像它是否能如你所愿，完全取决于你对它了解的深远。相信layui模态框能在你开发的过程中带给你无限的惊喜。
下面将会用新增和修改的例子来帮助你了解layui模态框
例一：如图1，在新增和修改的模态框中，除了他们的模态框的ID不一样之外，其他的内容都是一样的

图1
从上图可以看出我们在使用模态框的时候引用了layui插件，
（）
因为新增和修改都是同一个案例，而且代码比较多，所以就讲将它们的代码复制出来放到一个表格里面好对比，表格如下：
新增代码 修改代码
//打开新增Modal
function openInsert() {
$("#formEmployee")[0].reset();//重置表单
$("#modalEmployee").modal(‘show’); //打开模态框
}
//保存新增
function savaInsert() {//获取表单值
var employeeNum = $("#employeeNum").val();
var employeeName = $("#employeeName").val();
var telphone = $("#telphone").val();
var address = $("#address").val();
//判断值
if (employeeName != “” && employeeNum != “”
&& telphone != “” && address != “”) {
KaTeX parse error: Expected '}', got 'EOF' at end of input: …否成功 //成功//关闭模态框("#modalEmployee").modal(‘hide’);
employee.reload();//刷新表格
}
layer.alert(data.Text); }, “json”);}
else {
layer.alert(‘请填写完整’, { icon: 0 });
}
} function updateEmployee(employeeID) {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲formEmployee1")….post("/Main/selectEmployeeId",{employeeID:
employeeID,}, function (data) {
if (data != null) {//回填表单
$("#employeeID1").val(data.employeeID); $("#employeeNum1").val(data.employeeNum); $("#employeeName1").val(data.employeeName); $("#telphone1").val(data.telphone); $("#address1").val(data.address);
//打开模态框 $("#modalEmployee1").modal(‘show’);
} else {
layer.alert(“参数异常”);}
}, ‘json’);
}
//保存修改
function savaUpdate() {
//获取表单值
var employeeID = $("#employeeID1").val();
var employeeNum = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲employeeNum1").…("#employeeName1").val();
var telphone = $("#telphone1").val();
var address = $("#address1").val();
//判断值
if (employeeName != “” && employeeNum != “”
&& telphone != “” && address != “”){
KaTeX parse error: Expected '}', got 'EOF' at end of input: …e) {//成功//关闭模态框("#modalEmployee1").modal(‘hide’);
employee.reload();//刷新表格
} layer.alert(data.Text); }, “json”);
}else {
layer.alert(‘请填写完整’, { icon: 0 });
}
}
如果你以为一个模态框只能对应一个功能，那么你就有点小看layui模态框了，我说过它能够在开发的过程中给你带来意外的惊喜，不信？请看例二：（为了体现它的功能，这里例二用的案例跟例一是同一个，在这样一个比较的前提之下，相信更能有助于你学习layui模态框。）
图2为例二的页面布局代码（里面模态框的头部、模态框内容部分都是和例一的一模一样。）
图2
由上图可见新增和修改共用了同一个模态框，那么有人可能会认为它需要的代码应该比不共用模态框时要多，如果你是这样认为的，那么你就错了，它用的代码其实要比例一少的多，请看下表：

新增代码 修改代码
$("#insertEmployee").click(function () {
blInsert = true; //新增操作
$(’#formEmployee input[type=“reset”]’)
.click();//重置表单
layerIndex = layer.open({//弹出layer窗体
type: 1, //页面层 layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
area: [“480px”, “180px”],offset:“100px”,
title: “新增员工”,
content: $("#modalEmployee")
});
}); function updateEmployee(employeeID) {
blInsert = false;//修改操作
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲formEmployee in….post("/Main/SelectEmployeeById",{ employeeID: employeeID }, function (data) {
//数据回填 $("#employeeID").val(data.employeeID); $("#employeeNum").val(data.employeeNum); $("#employeeName").val(data.employeeName); $("#telphone").val(data.telphone); $("#address").val(data.address);
});
//弹出layer窗体
layerIndex = layer.open({
type: 1, area: [“480px”, “180px”],
offset: “100px”,title: “修改员工信息”,
content: $("#modalEmployee")
});
}
新增 & 修改的保存
//模态框的关闭
function layerClose() { layer.close(layerIndex);}
$("#close").click(function () { layer.close(layerIndex);});
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btnSaveEmployee…(’#formEmployee [name=“employeeName”]’).val() != “”) { var url = “”;
if (blInsert) {//无员工id 表单为新增
url = “/Main/insertEmployee”;
} else { //有员工id 表单为修改
url = “/Main/UpdateEmployee”;
}
//序列化表单:新增：名称，修改：ID，名称)
var formDate = $("#formEmployee").serializeArray(); /
$.post(url, formDate, function (msg) {
if (msg.State) {
layerClose();//关闭窗体
employee = layuiTable.reload(‘employee’); //刷新table
}
layer.alert(msg.Text);
});
} else {
layer.alert(“请将数据信息填写完整!”, { icon: 0, title: “提示” });
}
});
由这个例子可见，在使用layui模态框时能够帮助你节省很多页面布局的时间，而且还能减少代码量，这样方便的模态框，何不学会运用呢！