解决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 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
Jquery使用val方法读写value值
May 18 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
微信小程序保持session会话的方法
Mar 20 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
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
js传值 判断
2006/10/26 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
javascript模拟命名空间
2015/04/17 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
JS实现瀑布流布局
2017/10/21 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python匿名函数及应用示例
2019/04/09 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
学校出纳员岗位职责
2014/03/18 职场文书
会计演讲稿范文
2014/05/23 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Pytorch 如何实现常用正则化
2021/05/27 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android