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 一个函数对同一元素的多个事件响应
Jul 25 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
jQuery ajax应用总结
Jun 02 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 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输出表格的实现代码(修正版)
2010/12/29 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP输出时间差函数代码
2013/01/28 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
Python实现Const详解
2015/01/27 Python
详解Django框架中的视图级缓存
2015/07/23 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python列表生成器迭代器实例解析
2019/12/19 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
个人授权委托书
2014/04/03 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
勇敢的心观后感
2015/06/09 职场文书
八月迷情观后感
2015/06/11 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js