解决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 prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
js简单抽奖代码
Jan 16 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
vue如何搭建多页面多系统应用
Jun 17 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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几个数学计算的内部函数学习整理
2011/08/06 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
2016/08/16 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
JS高级运动实例分析
2016/12/20 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Python求解平方根的方法
2015/03/11 Python
Python决策树分类算法学习
2017/12/22 Python
np.random.seed() 的使用详解
2020/01/14 Python
python中如何使用虚拟环境
2020/10/14 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
聚会通知怎么写
2015/04/23 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
Java实现给Word文件添加文字水印
2022/02/15 Java/Android