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 Excel操作知识点
Apr 24 Javascript
js arguments.callee的应用代码
May 07 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
Three.js快速入门教程
Sep 09 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
JS原生实现轮播图的几种方法
Mar 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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
代码分析Python地图坐标转换
2018/02/08 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
python求绝对值的三种方法小结
2019/12/04 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
SQL Server笔试题
2012/01/10 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
借款担保书范文
2014/05/13 职场文书
企业宣传口号
2014/06/12 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
医院病假条范文
2015/08/17 职场文书
php实现自动生成验证码的实例讲解
2021/11/17 PHP