解决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 相关文章推荐
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
js生成随机数的方法实例
Oct 16 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
JavaScript原型对象原理与应用分析
Dec 27 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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实现Ftp用户的在线管理
2012/02/16 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
Python中生成ndarray实例讲解
2021/02/22 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
玲玲的画教学反思
2014/02/04 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python