解决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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
详解Vue之事件处理
Jul 10 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
简单实现php上传文件功能
2017/09/21 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
美国购车网站:TrueCar
2016/10/19 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
社区维稳工作方案
2014/06/06 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
教师个人总结范文
2015/02/11 职场文书
结婚主持人致辞
2015/07/28 职场文书
部门主管竞聘书
2015/09/15 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android