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 相关文章推荐
js倒计时小程序
Nov 05 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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初学入门
2006/11/19 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
php绘制一条直线的方法
2015/01/24 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
python实现ip查询示例
2014/03/26 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
tensorflow获取变量维度信息
2018/03/10 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python文件排序的方法总结
2020/09/13 Python
C#面试问题
2016/07/29 面试题
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
社会实践评语
2014/04/28 职场文书
高中班级口号
2014/06/09 职场文书
三方股份合作协议书
2014/10/13 职场文书
个人工作保证书
2015/02/28 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
2019银行竞聘书
2019/06/21 职场文书