解决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接受和处理xml数据的代码(.net)
Mar 28 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
JavaScript原始值与包装对象的详细介绍
May 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
无线电广播的开始
2002/01/30 无线电
对javascript和select部件的结合运用
2006/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
硕士研究生自我鉴定
2013/11/08 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
社区务虚会发言材料
2014/10/20 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Python 实现Mac 屏幕截图详解
2021/10/05 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python