解决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 数据格式介绍
Jan 13 Javascript
javascript操作css属性
Dec 30 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 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
PHP生成Flash动画的实现代码
2010/03/12 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python argv用法详解
2016/01/08 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
打架检讨书400字
2014/01/17 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
校庆活动策划方案
2014/06/05 职场文书
2014年建筑工作总结
2014/11/26 职场文书
初中军训感言
2015/08/01 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python