layer实现弹出层自动调节位置


Posted in Javascript onSeptember 05, 2019

项目中有弹出层的内容是不固定的,根据情况可能变长变短,于是就要求做layer弹出层的大小自适应,查询了api后发现

layer.iframeAuto方法可以实现,这里吐槽一点,ie浏览器的html没有被body撑大,而iframeAuto方法是根据html的高度计算的,导致我之前出现在ie下,调用iframeAuto后高度直接变零。

好了,做好了这一点之后,测试又提出一个问题,因为他是用小屏幕测试的,上面的位置没有变,弹出层变长以后按钮就被挤到下面去了。所以我需要做一个效果,在弹出层长度改变后重新居中。

这时我就在网上开始找资料了,发现layer.style可以实现这个效果,但是很麻烦需要计算然后赋值。

正当我决定用这个方案时,结果我在chrome控制台测试layer.style时发现一个意外的效果。当我移动控制台边界改变大小时,弹出层自动居中了。

移动前

layer实现弹出层自动调节位置

移动后

layer实现弹出层自动调节位置

实际上是触发了父层的$(window).resize()。

然后我开始向这个方法实验,但是不管是$(top.window).resize(),$(window.top).resize(),top.$(window).resize(),$(top).resize()都不能触发top层的$(window).resize()方法。

最后还是没有成功,我只好重新使用layer.style来计算了

var index = top.layer.getFrameIndex(window.name);//获得layer弹出层索引
top.layer.iframeAuto(index, 30);//layer弹出层自适应,改造的代码,源代码加上自己加的高度
var topHeight = ($(top.window).height() - $(window).height())/2;//计算高度
top.layer.style(index,{top:topHeight+"px"});//设置弹出层位置

中规中矩解决这个问题,不过还是不知道在弹出层是否能够调用父页面的$(window).resize()

完!

以上这篇layer实现弹出层自动调节位置就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
原生js实现吸顶效果
Mar 13 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
简单分析js中的this的原理
Aug 31 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 #Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 #Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 #Javascript
React路由鉴权的实现方法
Sep 05 #Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 #Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 #Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 #Javascript
You might like
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
js读取配置文件自写
2014/02/11 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
react build 后打包发布总结
2018/08/24 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
python实现XML解析的方法解析
2019/11/16 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
用Python制作音乐海报
2021/01/26 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
党员年终民主评议的自我评价
2013/11/05 职场文书
单位领导证婚词
2014/01/14 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2015年科普工作总结
2015/07/23 职场文书