您现在的位置是:群英 > 开发技术 > web开发
layer弹出层怎么实现大小自适应
Admin发表于 2022-04-28 17:48:011291 次浏览
关于“layer弹出层怎么实现大小自适应”的知识点有一些人不是很理解,对此小编给大家总结了相关内容,文中的内容简单清晰,易于学习与理解,具有一定的参考学习价值,希望能对大家有所帮助,接下来就跟随小编一起学习一下“layer弹出层怎么实现大小自适应”吧。

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

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

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

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

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

移动前

移动后

实际上是触发了父层的$(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弹出层怎么实现大小自适应”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注群英网络,小编每天都会为大家更新不同的知识。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: layer弹出层
相关信息推荐
2022-07-18 17:30:02 
摘要:判断方法:1、用count()函数获取数组长度,语法“$len=count($arr);”;2、利用比较运算符“>”判断数组长度是否大于1,语法“$len>1”,如果长度大于1则数组中有多个值,反之则数组中有1个值或没有值。
2022-05-06 17:53:47 
摘要:这篇文章主要介绍了php+js实现点赞功能的示例详解,文章通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2021-12-30 20:34:56 
摘要:这篇文章给大家分享的是Jetty的相关内容,对于新手来说,可能不是很了解Jetty是什么,对此本文就给大家来详细的介绍一下Jetty的特性以及用法,对大家了解和学习Jetty的使用都有帮助,那么感兴趣的朋友接下来一起跟随小编看看吧。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部