解决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 相关文章推荐
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
PHP ajax 分页类代码
2008/11/13 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
javascript定时变换图片实例代码
2013/03/17 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
JavaScript简介
2015/02/15 Javascript
Prototype框架详解
2015/11/25 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
详解js中==与===的区别
2017/01/08 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
Python中实现的RC4算法
2015/02/14 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
Python创建临时文件和文件夹
2020/08/05 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
国际经济贸易专业推荐信
2013/11/06 职场文书
课外活动实习计划
2015/01/19 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记