解决layui模态窗体关闭的问题

解决layui模态窗体关闭的问题

开发工具与关键技术:Visual Studio 前端

作者:盘子

撰写时间:2019年6 月5 日

学习了MVC,在做项目的过程中总会遇到很多表格的增删查改,即新增数据信息、删除数据信息、查询数据信息、修改数据信息。整个学习过程都是在用layui这个插件,它的用法可以是layer.use模块化使用也可以是非模块化使用,而在学习中多采用模块化使用。使用要先用var声明变量,如页面加载事件,都会先加载和初始化layui模块,然后渲染表格、数据分页都很方便简单。

下面是一个关于关闭layui模态窗体的另一种非常简单的方法的小案例,是在做这次的案例layui弹出层——员工的新增与修改模态窗体的过程中遇到的。一般情况下在检查所有的数据绑定都没有出错,当点击新增或修改按钮,就会弹出模态窗体并且可以输入所需要的数据进行新增保存,如最后的效果图中的图二。但是在做这次的案例中,当输入需要新增或修改的数据,然后点击保存时,数据显示新增进去了,但模态窗体却在不断的刷新。点击返回按钮与右上角的关闭按也钮关闭不了&#

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Layui 模态框中,可以通过给按钮添加点击事件处理函数来编写按钮的方法。下面是一个示例代码,演示了如何在 Layui 模态框中给按钮添加方法: ```javascript layui.use('layer', function() { var layer = layui.layer; // 监听打开模态框按钮的点击事件 document.getElementById('openModalBtn').addEventListener('click', function() { var html = ` <div> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> </div> `; var index = layer.open({ type: 1, title: 'Layui Modal', content: html, area: '400px', success: function(layero, index) { // 绑定按钮1的点击事件处理函数 document.getElementById('btn1').addEventListener('click', function() { console.log('点击了按钮1'); // 其他逻辑... }); // 绑定按钮2的点击事件处理函数 document.getElementById('btn2').addEventListener('click', function() { console.log('点击了按钮2'); // 其他逻辑... }); }, cancel: function(index, layero) { console.log('点击了关闭按钮'); // 其他逻辑... } }); }); }); ``` 在上述代码中,我们通过 `layer.open()` 方法创建了一个模态框。在 `success` 参数中,我们可以获取到模态框的 DOM 元素和索引。然后,我们给模态框中的按钮1和按钮2分别添加了点击事件处理函数。在这些事件处理函数中,你可以编写你想要的按钮逻辑。 另外,我们还可以使用 `cancel` 参数来监听模态框关闭事件。在这个示例中,我们为模态框关闭按钮添加了一个点击事件处理函数,并在函数内部打印了一条消息。 请根据您的实际需求修改按钮的 ID、按钮逻辑以及其他相关代码。 希望这对您有所帮助!如果有任何进一步的问题,请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值