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 相关文章推荐
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
Js类的构建与继承案例详解
Sep 15 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的ob_start();控制您的浏览器cache!
2007/02/14 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
python分析网页上所有超链接的方法
2015/05/08 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
Django继承自带user表并重写的例子
2019/11/18 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
自我鉴定写作要点
2014/01/17 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
小班上学期评语
2014/05/05 职场文书
员工培训协议书
2014/09/15 职场文书
2015年教师新年寄语
2014/12/08 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python