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 相关文章推荐
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
vuex实现购物车功能
Jun 28 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数据库抽象层 PDO
2011/05/07 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
财务部总监岗位职责
2014/03/12 职场文书
气象学专业个人求职信
2014/04/22 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
违纪学生保证书
2015/02/27 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript