解决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 相关文章推荐
javascript json 新手入门文档
Dec 03 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
Python内置数据类型详解
2014/08/18 Python
python内存管理分析
2015/04/08 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Django通过json格式收集主机信息
2020/05/29 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
社区七一党员活动方案
2014/01/25 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
酒店端午节活动方案
2014/08/26 职场文书
财务稽核岗位职责
2015/04/13 职场文书
中学推普周活动总结
2015/05/07 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js