layer弹出层全屏及关闭方法


Posted in Javascript onAugust 17, 2018

一、首先引用JS文件

<script src="../../js/common/layer/layer.js"></script>

二、全屏调用以下代码

var index = layer.open({
 type: 2,
 content: url,
 area: ['300px', '195px'], 
 title: false,
 maxmin: true, 
 closeBtn: 0
    });
layer.full(index);

三、关闭弹出层

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

总结:

这种打开的页面的好处是:直接关闭当前弹出层,不用刷新整个页面,不用加载数据,性能高,节约时间,缺点是查询参数的传输不方便。

补充:

这种写法产地参数十分的不方便,试过array方式传参解读过去的都是object根本不是想要的数据,而json格式数据因为里面带有引号只会传递部分数据,我在这里总结了一个方法,从几种方法里面选的一个相对较好的传参方式:

[{"name":"periodstart","value":"2014-01"},{"name":"periodend","value":"2014-12"},{"name":"fkcategory","value":""},{"name":"fkCategoryName","value":""},{"name":"fkmandept","value":""},{"name":"fkMandeptName","value":""},{"name":"fkusedept","value":""},{"name":"fkUsedeptName","value":""},{"name":"pkcurrtype","value":""},{"name":"total","value":""}]
JSON.stringify($('#searchForm').serializeArray()).replace(/"+/g,'').replace(/name:/g,'').replace(/,value:/g,'=').replace(/},{/g,',');

这是先将一个form表单里面的数据序列化出来,然后转为json格式,然后将json格式的数据转为map避免json数据里面引号对数据的传递影响,然后在后台直接在后台强转为map格式的数据,非常方便。

Map<String, String> map = new HashMap<String, String>();
 String data = "{periodstart=2014-01,periodend=2014-12,fkcategory=,"
 + "fkCategoryName=,fkmandept=,fkMandeptName=,fkusedept=,fkUsedeptName=,pkcurrtype=,total=}";;
 data = data.substring(1, data.length()-1);//去掉前后括号
 String[] arraydata = data.split(",");//按“,”将其分为字符数组
 for (int i = 0; i < arraydata.length; i++) {
  int j = arraydata[i].indexOf("=");
  map.put(arraydata[i].substring(0, j-1), arraydata[i].substring(j+1, arraydata[i].length()));
 }
 Object o = map.get("perioden");
 System.out.println(o.toString());
{periodstart=2014-01,periodend=2014-12,fkcategory=,fkCategoryName=,fkmandept=,fkMandeptName=,fkusedept=,fkUsedeptName=,pkcurrtype=,total=}

以上这篇layer弹出层全屏及关闭方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
vue+iview+less 实现换肤功能
Aug 17 #Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 #Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 #Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 #Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 #Javascript
LayerClose弹窗关闭刷新方法
Aug 17 #Javascript
You might like
php 保留字列表
2012/10/04 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php动态绑定变量的用法
2015/06/16 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
浅析vue中的MVVM实现原理
2019/03/04 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
python备份文件的脚本
2008/08/11 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
深入理解Python中的super()方法
2017/11/20 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
Python 内存管理机制全面分析
2021/01/16 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android