解决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 (用setTimeout而非setInterval)
Dec 28 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php简单统计在线人数的方法
2016/05/10 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
电气专业推荐信范文
2013/11/18 职场文书
表彰先进的通报
2014/01/31 职场文书
广播体操比赛口号
2014/06/10 职场文书