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 相关文章推荐
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
JavaScript 事件系统
Jul 22 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
Node.js返回JSONP详解
May 18 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
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
一个颜色轮换的简单例子
2006/10/09 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP实现的策略模式示例
2019/03/20 PHP
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
python学习之matplotlib绘制散点图实例
2017/12/09 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
白色公司:The White Company
2017/10/11 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
优秀本科生求职推荐信
2014/02/24 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python