模态框，Javaweb面试宝典

Android失眠夜

于 2024-03-22 21:30:53 发布

阅读量1k

点赞数 12

分类专栏： 2024年程序员学习文章标签：面试 javascript 前端

本文链接：https://blog.csdn.net/m0_61418075/article/details/136952472

版权

2024年程序员学习专栏收录该内容

233 篇文章 1 订阅

订阅专栏

在项目的开发中，如果想要在页面布局那里减少开发时间，那么我们就可以使用现成的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 });

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注Java）

最后我们该如何学习？

1、看视频进行系统学习

这几年的Crud经历，让我明白自己真的算是菜鸡中的战斗机，也正因为Crud，导致自己技术比较零散，也不够深入不够系统，所以重新进行学习是很有必要的。我差的是系统知识，差的结构框架和思路，所以通过视频来学习，效果更好，也更全面。关于视频学习，个人可以推荐去B站进行学习，B站上有很多学习视频，唯一的缺点就是免费的容易过时。

另外，我自己也珍藏了好几套视频资料躺在网盘里，有需要的我也可以分享给你：

1年半经验，2本学历，Curd背景，竟给30K，我的美团Offer终于来了