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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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自动注册登录验证机制实现代码
2011/12/20 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
原生js实现放大镜
2017/02/20 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
Python求导数的方法
2015/05/09 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
代理商会议邀请函
2014/01/27 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
读后感作文评语
2014/12/25 职场文书
公司安全管理制度范本
2015/08/05 职场文书
七夕情人节问候语
2015/11/11 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
深入理解python多线程编程
2021/04/18 Python
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers