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

最新推荐文章于 2024-05-31 17:16:09 发布
最新推荐文章于 2024-05-31 17:16:09 发布
阅读量3.8k 收藏
点赞数
文章标签： layui VS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44543412/article/details/90900291
版权

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

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

作者：盘子

撰写时间：2019年6 月5 日

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

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

最低0.47元/天 解锁文章
㴇燚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Layui 子页面：需要关闭当前弹窗（子页面）
BugRoot的博客
08-16 1万+
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭 parent.layer.alert(result.message,{icon:1});
解决layui-open关闭自身窗口的问题
10-16
在使用过程中，有时我们需要关闭由layui-open弹出的自身窗口，这个问题可以通过特定的方法来解决。 首先，我们来看弹窗的实现。在JavaScript部分，我们使用`layer.open`方法打开一个新页面作为弹窗。例如： ```...
IE模态窗口中，关闭layer导致模态窗口关闭解决办法
xiayiyewumian的专栏
04-24 417
在项目中运用layer前端组件，发现当在ie模态窗口中打开layer窗口后，当点击layer窗口右上角的关闭按钮时，会连带模态窗口一并关闭，采用以下办法可以解决问题，大致原理为：不采用layer自带的关闭方法，通过remove掉页面相应的layer元素来实现关闭layer。 layer.open({ type:2, title:'标题', co...
6-给layui.open加loading简单示例
最新发布
weixin_46675693的博客
05-31 481
一般情况下，可以直接使用layui中的load()方法，但是该方法的展示范围为整页面，如果展示的内容是居中展示，则不影响，不过需要自行给layui.open的内容区域加遮罩层。前提条件：由于layui.open中展示的内容从后台获取，但获取较慢，体验不好，故需要加一个loading，等待获取到数据后才能操作内容。用上后发现，loading不动了，查了资料后发现用法有问题，对于动态图标，需要使用layui封装的动画样式，如。等到数据获取后，在请求的回调中隐藏loading即可。
layui关闭当前弹出框的方法
weixin_40362806的博客
11-23 622
方法closeAll()会销毁掉当前页所有的layer层，或者closeAll(type)只关闭某个类型的层。
layui弹窗和关闭
qq_34631220的博客
08-20 3272
弹窗 <div id="biaodan" style=""> 内容 </div> 弹窗 layer.open({ type: 1, title: '编辑', area: ['80%', '80%'], shade: 0, content: $('#biaodan'), end : function() { ...
layui，点击按钮将当前已经打开的窗口页关闭、弹窗关闭
CSDN for recording problems
06-01 3592
let index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);
解决layui弹框失效的问题
10-16
在使用layui框架时，弹框（弹层）是其核心功能之一，用于创建各种提示、对话框、模态窗口等。然而，在实际开发过程中，有时可能会遇到...在日常开发中，理解框架的工作原理和依赖关系，对于高效地解决问题至关重要。
Delphi 模态窗体下更新另一个窗体内容
08-17
当一个模态窗体打开时，它会阻止用户与父窗体或其他非模态窗体的交互，直到该模态窗体被关闭。这种机制在需要用户输入关键信息或确认操作时非常有用。 在描述中提到的“更新另一个窗体内容”是指在模态窗体中进行...
QT 虚拟键盘 解决模态窗口卡死问题
11-26
本文将深入探讨如何使用Qt来创建虚拟键盘，特别是解决模态窗口可能导致的应用程序卡死问题。模态窗口（如对话框）在用户交互中起到重要作用，但当它们与自定义输入方式如虚拟键盘结合时，可能会出现一些技术挑战。...
模态窗体(artDialog4.1.7)
07-27
模态窗体具有阻止背景页面交互的特性，直到用户关闭该窗口才能继续操作主页面。在JavaScript和CSS库的助力下，创建模态窗口变得更加便捷。本文将深入探讨“artDialog4.1.7”这一组件，它是一款轻量级、高效的模态...
layui框架的弹框关闭方法
zuo_kaizheng的博客
05-14 1773
layUI实现弹框内部使用代码关闭弹框 话不多说，上代码 //关闭弹框的按钮加上一个id名 <button id="close" class="search-btn" style="background-color: #fff;margin-right: 10px;border: 1px solid #eee;" type="button">关闭</button> 效果图 js代码 <script src="js/jquery.js"></script>
【Layui】关闭弹出层
qq_54048083的博客
10-22 1117
【代码】【Layui】关闭弹出层。
LayUI询问框定义取消按钮和窗口关闭按钮事件
Keep on moving!
10-17 3460
layer.confirm('确认删除吗？', { yes: function (index) { var id = data.STRATEGY_ID + ""; $.ajax({ ...... }, ...
layui 在一个弹窗中点击某一按钮再次弹一个窗口并将第一个窗口关闭
Devil_Forever的博客
09-04 2010
var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name parent.layer.close(index); //关闭第一个窗口 parent.layer.open({ //打开第二个窗口 //… });
layer拟态框
m0_64468436的博客
02-26 334
基本拟态框： layer.open({ type: 1, //弹窗类型 title: '添加信息', //显示标题 closeBtn: 1, //是否显示关闭按钮 maxmin: false, //是否显示放大缩小 fadeIn: 3000, ...
layui 子页面调用父页面方法 layer.open modal 关闭时调用父类方法
vransy的博客
11-04 1705
延迟一秒后关闭弹窗 并执行父类方法 setTimeout(function () { // 因为使用layui弹出 所以需要引用 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
x-admin模板基于layui的模态框关闭后，父页面数据表格重载的方式
张小思想家的博客
04-14 1502
基于layui的x-admin模板，关闭子页面模态框，只重载父页面的数据表格
layui弹框自己定按钮关闭弹框
_QIuXiaoYi的博客
11-26 4912
layui自己定义按钮关闭layui的弹窗 function closeWindow(){//关闭弹出层事件 var index=parent.layer.getFrameIndex(window.name); parent.layer.close(index); } 在使用的地方调用上面的方法即可自定义按钮关闭layui弹窗 一款可以领外卖红包的小程序，大家扫码领取即可，一般红包金额在5-12之间，如需使用，选择性领取即可。 ......
layui模态框中按钮如何写方法
07-23
在 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、付费专栏及课程。

余额充值