解决layui-open关闭自身窗口的问题


Posted in Javascript onSeptember 10, 2019

如下所示:

解决layui-open关闭自身窗口的问题

1、这里的弹窗弹出来的是一个页面,经过了后台才弹出来的一个页面

1.1、弹窗的实现

1.1.1、 js 部分

function getArticleById(articleId){
 var index = layer.open({
  type: 2,
  title: '修改管理员',
  area: ['90%', '95%'],
  shade: 0.8,
  resize: false,
  fixed: false,
  move: false,
  shadeClose: false,
  content: '${ctxPath}/article/getArticleById?articleId='+articleId
 });

 }

1.1.2、后台Java部分

/**
* 去到修改文章页面
* */
 @RequestMapping("/getArticleById")
 public String getArticleById(@RequestParam("articleId") Integer articleId,Model model) {
 MrtArticle mrtArticle = mrtArticleService.getArticleById(articleId);
 model.addAttribute("mrtArticle",mrtArticle); 
 return "article/articleUpdate";

 }

到这里也面就弹出来了

1.2、关闭该弹窗,在articleUpdate.jsp的JS部分用以下两行代码它就把自己关闭了

//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

parent.layer.close(index); //再执行关闭 

 layer.alert('提交成功', {
  skin: 'layui-layer-molv' //样式类名 自定义样式
  ,closeBtn: 1 // 是否显示关闭按钮
  ,anim: 1 //动画类型
  ,btn: ['确定'] //按钮
  ,icon: 6 // icon
  ,yes:function(){
  //当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

  }
 });

layer.close(index) - 关闭特定层

关于它似乎没有太多介绍的必要,唯一让你疑惑的,可能就是这个index了吧。事实上它非常容易得到。

//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的,每一种弹层调用方式,都会返回一个index
layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可
//如果你想关闭最新弹出的层,直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
layer.closeAll(type) - 关闭所有层

如果你很懒,你不想去获取index你只想关闭。那么closeAll真的可以帮上你。如果你不指向层类型的话,它会销毁掉当前页所有的layer层。当然,如果你只想关闭某个类型的层,那么你可以

layer.closeAll(); //疯狂模式,关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层

以上这篇解决layui-open关闭自身窗口的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
vue中引入mxGraph的步骤详解
May 17 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 #Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 #Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 #Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 #Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 #Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 #Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 #Javascript
You might like
PHP之变量、常量学习笔记
2008/03/27 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
JavaScript Prototype对象
2009/01/07 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
js解决movebox移动问题
2016/03/29 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
js实现搜索栏效果
2018/11/16 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
Python格式化日期时间操作示例
2018/06/28 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
教师实习自我鉴定
2013/12/13 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
酒店节能减排方案
2014/05/26 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
红头文件任命书范本
2014/06/05 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
Python日志模块logging用法
2022/06/05 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS