解决layui模态窗体关闭的问题
解决layui模态窗体关闭的问题
开发工具与关键技术：Visual Studio 前端
作者：盘子
撰写时间：2019年6 月5 日
学习了MVC，在做项目的过程中总会遇到很多表格的增删查改，即新增数据信息、删除数据信息、查询数据信息、修改数据信息。整个学习过程都是在用layui这个插件，它的用法可以是layer.use模块化使用也可以是非模块化使用，而在学习中多采用模块化使用。使用要先用var声明变量，如页面加载事件，都会先加载和初始化layui模块，然后渲染表格、数据分页都很方便简单。
下面是一个关于关闭layui模态窗体的另一种非常简单的方法的小案例，是在做这次的案例layui弹出层——员工的新增与修改模态窗体的过程中遇到的。一般情况下在检查所有的数据绑定都没有出错，当点击新增或修改按钮，就会弹出模态窗体并且可以输入所需要的数据进行新增保存，如最后的效果图中的图二。但是在做这次的案例中，当输入需要新增或修改的数据，然后点击保存时，数据显示新增进去了，但模态窗体却在不断的刷新。点击返回按钮与右上角的关闭按也钮关闭不了，模态窗体依旧是不断地刷新弹出。因为应用layui.layer插件，它们的基础参数也就是调用方法时用到的配置项，它们是以键值形式存在的，所以无需所有都去配置，可以进行选择。所以有模态窗体的弹出，也会有相应的关闭方法，方法代码如下图最后划线的代码句。见代码截图如下：
对于遇到新增、修改模态窗体填写数据，数据显示新增进去，而模态窗体在不断刷新问题的解决，我的解决方法很简单，那就是我在右上角close关闭按钮设置了它一个类名和一个id，最后给close关闭按钮以及模态窗体返回按钮都设置一个window页面跳转。方法代码如代码截图中的划线代码语句。点击新增按钮弹出模态窗体输入数据进行新增保存，页面跳转到主页面：如下面展示的效果图图一所示，同时数据新增到数据表格：如下面展示的效果图二、图三的数据所示。修改、删除也如新增一样在修改、删除数据时可以进行window页面的跳转。
话说Window对象页面跳转是很常用的一个对象，它是BOM浏览器对象模型的核心对象，也是其顶层对象，其他对象都为window对象的子对象。全局变量是 window 对象的属性。全局函数是 window 对象的方法。window 对象也有多种方法，如，
alert()显示带有一段消息和一个确认按钮的警示框
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
window.open() 打开一个新的浏览窗口或查找一个已命名的窗口
window.close() 关闭当前浏览窗口
window.moveTo() 移动当前窗口
window.resizeTo() 调整当前窗口的尺寸
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
其他方法：
moveBy、moveTo、resizeBy、resizeTo、scrollBy、scrollTo、focus、blur等
这次的页面跳转用到了window.location对象，location对象是window对象的一个部分，可通过 window.location 属性来访问
window.location() 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。window.location() 对象在编写时可不使用 window 这个前缀。
location.hostname() 返回 web 主机的域名
location.pathname() 返回当前页面的路径和文件名
location.port() 返回 web 主机的端口 （80 或 443）
location.protocol() 返回所使用的 web 协议（http:// 或 https://）
location.href() 属性返回当前页面的 URL。
assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档
页面跳转window对象使用简单方便，它的对象方法有多种，在这里只是顺便简单的讲解了两种方法的知识点，需要了解更多的可以自行去了解与应用。
利用window对象页面跳转这个方法虽然不是解决问题最好的方法，但可以说是一个解决问题非常简单粗暴的方法，至少对于这个简单的查询来说是可以帮助解决问题的一个方法。每个人解决问题的方法都不同，但学习过程中每一个细节的发现都可以说是收获一个知识点。
最后是展示的效果图，如图，进入主页面（如图一），点击进行新增、查询、修改、删除（如图二），保存页面跳转到主页面（即模态窗体被关闭）同时数据添加到表格（如图三），见效果截图如下：