解决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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 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 静态页面中显示动态内容
2009/08/14 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP中::、->、self、$this几种操作符的区别介绍
2013/04/24 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
深入理解Python3 内置函数大全
2017/11/23 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
自我评价如何写好?
2014/01/05 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
《雾凇》教学反思
2014/02/17 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
实习生个人总结范文
2015/02/28 职场文书
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS