解决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实现图片切换的幻灯片效果源代码
Dec 12 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
原生js实现分页效果
Sep 23 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
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+mysql写的留言本
2006/10/09 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
vue this.reload 方法 配置
2018/09/12 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python运行时间的几种方法
2016/06/17 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python读写压缩文件的方法
2020/07/30 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
生产内勤岗位职责
2013/12/07 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
运动会广播稿50字
2014/01/26 职场文书
小学教师办公室制度
2014/02/03 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
就业协议书怎么填
2014/04/11 职场文书
医院院务公开实施方案
2014/05/03 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
python pygame入门教程
2021/06/01 Python